vue3+vite配置 unplugin-vue-component 找不到 Vant 组件的问题


字数:1.1k 阅读时长:5分钟 阅读:85

使用 vue3 + vite + Vant 搭建移动端项目,为了避免全量引入 vant 导致打包体积过大,又不想一个一个组件手动导入,所以就选择了 vant 官方推荐的方法,使用 unplugin-vue-components 插件自动引入组件,并按需引入组件的样式。
但是运行过程中遇到了报错:[vite] Internal server error: Failed to resolve import "vant/es" from "xxx"

vue3 + vite

项目依赖

  • package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
{
"name": "vue3-demo",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite --host",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"git": "tive git -c tive.git.config.cjs",
"lint": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./src",
"lint:stylelint": "stylelint --cache --fix \"src/**/*.{less,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"prepare": "husky install"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^1.4.0",
"lib-flexible": "^0.3.2",
"pinia": "^2.0.35",
"vant": "^4.3.1",
"vue": "^3.2.47",
"vue-router": "4.0.1"
},
"devDependencies": {
"@types/node": "^20.1.0",
"@typescript-eslint/eslint-plugin": "^5.59.2",
"@typescript-eslint/parser": "^5.59.2",
"@vitejs/plugin-vue": "^4.1.0",
"typescript": "^5.0.2",
"unplugin-vue-components": "^0.24.1",
"vite": "^4.3.2",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-eslint": "^1.8.1",
"vite-plugin-style-import": "^2.0.0",
"vue-eslint-parser": "^9.2.1",
"vue-tsc": "^1.4.2"
},
"lint-staged": {
"*.{js,jsx,tsx,ts}": [
"npm run lint",
"npm run lint:stylelint"
]
}
}

完整报错

1
2
3
4
5
6
7
8
9
  Plugin: vite-plugin-eslint
File: /Users/tiven/Desktop/dev/yc-chat-mbi/src/components/Footer.vue
2:47:05 PM [vite] Internal server error: Failed to resolve import "vant/es" from "src/components/Footer.vue". Does the file exist?
Plugin: vite:import-analysis
File: /Users/tiven/Desktop/dev/yc-chat-mbi/src/components/Footer.vue:1:89
1 | /* unplugin-vue-components disabled */import { Field as __unplugin_components_1 } from 'vant/es';import 'vant/es/field/style/index';
| ^
2 | import { Button as __unplugin_components_0 } from 'vant/es';import 'vant/es/button/style/index';
3 | import { defineComponent as _defineComponent } from "vue";
  • vite.config.ts 配置如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'
import path from 'node:path'
import viteCompression from 'vite-plugin-compression'
import postCssPxToRem from 'postcss-pxtorem'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
resolve: {
// 在导入模块时,如果模块路径不包含文件扩展名,则会尝试添加下面这些扩展名
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
// 在导入模块时,如果模块路径以 / 开头,则会尝试在下面这些目录中查找该模块
alias: {
'@': path.resolve(__dirname, './src'),
'@img': path.resolve(__dirname, './src/assets/img'),
},
},
build: {
sourcemap: false,
minify: 'terser',
assetsInlineLimit: 4096,
reportCompressedSize: false,
rollupOptions: {
output: {
// 最小化拆分包
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString()
}
},
chunkFileNames: 'assets/js/[name].[hash].js', // 用于命名代码拆分时创建的共享块的输出命名,[name]表示文件名,[hash]表示该文件内容hash值
},
// external: ['antd'],
},
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
},
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
eslintPlugin({
include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.ts', 'src/*.vue'],
}),
viteCompression({
threshold: 1024 * 4,
}),
],
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 37.5, //1rem的大小
propList: ['*'], //需要转换的属性
selectorBlackList: ['.norem'], //过滤掉不需要转换的类名
}),
],
},
},
})

解决办法

修改 vite.config.ts 下的 resolve.extensions 参数配置,加入 .mjs 拓展名即可解决。

1
2
3
4
5
6
7
8
9
10
11
export default defineConfig({
resolve: {
// 在导入模块时,如果模块路径不包含文件扩展名,则会尝试添加下面这些扩展名
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
// 在导入模块时,如果模块路径以 / 开头,则会尝试在下面这些目录中查找该模块
alias: {
'@': path.resolve(__dirname, './src'),
'@img': path.resolve(__dirname, './src/assets/img'),
},
},
})

欢迎访问:天问博客

本文作者: Tiven
发布时间: 2023-05-07
最后更新: 2023-07-17
本文标题: vue3+vite配置 unplugin-vue-component 找不到 Vant 组件的问题
本文链接: https://www.tiven.cn/p/6d85bc69/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!