网站用户账号ip查询,无锡网站建设哪家公司比较好,搭建网站公司哪家好,《关于加快网站群建设的通知》使用 vue3 vite Vant 搭建移动端项目#xff0c;为了避免全量引入 vant 导致打包体积过大#xff0c;又不想一个一个组件手动导入#xff0c;所以就选择了 vant 官方推荐的方法#xff0c;使用 unplugin-vue-components 插件自动引入组件#xff0c;并按需引入组件的样式…使用 vue3 vite Vant 搭建移动端项目为了避免全量引入 vant 导致打包体积过大又不想一个一个组件手动导入所以就选择了 vant 官方推荐的方法使用 unplugin-vue-components 插件自动引入组件并按需引入组件的样式。 但是运行过程中遇到了报错[vite] Internal server error: Failed to resolve import vant/es from xxx 项目依赖
package.json
{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]}
}完整报错 Plugin: vite-plugin-eslintFile: /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-analysisFile: /Users/tiven/Desktop/dev/yc-chat-mbi/src/components/Footer.vue:1:891 | /* 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 配置如下
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 拓展名即可解决。
export default defineConfig({resolve: {// 在导入模块时如果模块路径不包含文件扩展名则会尝试添加下面这些扩展名extensions: [.mjs, .js, .ts, .jsx, .tsx, .json, .vue],// 在导入模块时如果模块路径以 / 开头则会尝试在下面这些目录中查找该模块alias: {: path.resolve(__dirname, ./src),img: path.resolve(__dirname, ./src/assets/img),},},
})欢迎访问天问博客
