Vue3 + vite 按需引入vant报错 Failed to resolve import “vant/es“ from “xxx“. Does the file exist?

学习 vue3 + vite 的时候，做一个demo项目，其中用到了vant。按照vant官网按需引入组件的时候。在vite配置中，自己配置了extensions时，没有配置 .mjs，导致找不到文件。vant的入口文件是 .mjs 后缀的，痛苦面具。

wuyxinu

3677人浏览 · 2023-10-13 15:35:24

wuyxinu · 2023-10-13 15:35:24 发布

背景

学习 vue3 + vite 的时候，做一个demo项目，其中用到了vant。按照vant官网按需引入组件的时候
在这里插入图片描述

遇到问题

在这里插入图片描述

原因

在vite配置中，自己配置了extensions时，没有配置 .mjs，导致找不到文件

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  resolve: {
    extensions: [".js", ".jsx", ".ejs", '.mjs'], // 之前忽略了 .mjs
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

vant的入口文件是 .mjs 后缀的，痛苦面具
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^