报错信息

1
2
3
[plugin:vite:import-analysis] Failed to resolve import "vant/es" from x Does the file exist?

/* unplugin-vue-components disabled */import { Button as __unplugin_components_0 } from 'vant/es'; import 'vant/es/button/style/index'

现象

如以上报错信息，vite 找不到 Vant 组件，记录本文时，vant vite unplugin-vue-components 等版本如下

1
2
3
4
5
6
7
8
9
{
  "dependencies": {
    "vant": "^4.2.1"
  },
  "devDependencies": {
    "vite": "^3.2.5",
    "unplugin-vue-components": "^0.24.1"
  }
}

Vant 官方文档编写的按需引入方式如下：

1
2
3
4
5
6
7
8
9
10
11
12
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "unplugin-vue-components/resolvers";

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

个人配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    svgLoader({ svgoConfig: {} }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, "../src"),
      },
    ],
    extensions: [".ts", ".js"],
  },
  define: {
    "process.env": {},
  },
});

解决方案

找了挺久的，最后发现是拓展名的问题，不限制拓展名或者加入 .mjs 拓展名即可解决。

1
2
3
4
export default defineConfig({
-   extensions: [".ts", ".js"],
+   extensions: [".ts", ".js", ".mjs"],
})

其他