解決vue3+vite配置unplugin-vue-component找不到Vant組件

更新時間：2023年09月20日 11:44:11 作者：天問

這篇文章主要為大家介紹了vue3+vite配置unplugin-vue-component找不到Vant組件問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

使用 vue3 + vite + Vant 搭建移動端項目

使用 vue3 + vite + Vant 搭建移動端項目，為了避免全量引入 vant 導致打包體積過大，又不想一個一個組件手動導入，所以就選擇了 vant 官方推薦的方法，使用 unplugin-vue-components 插件自動引入組件，并按需引入組件的樣式。

但是運行過程中遇到了報錯：

[vite] Internal server error: Failed to resolve import "vant/es" from "xxx"

vue3 + vite

項目依賴

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-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 配置如下：

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', // 用于命名代碼拆分時創(chuàng)建的共享塊的輸出命名，[name]表示文件名,[hash]表示該文件內(nèi)容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: ['*'], //需要轉(zhuǎn)換的屬性
          selectorBlackList: ['.norem'], //過濾掉不需要轉(zhuǎn)換的類名
        }),
      ],
    },
  },
})

解決辦法

修改 vite.config.ts 下的 resolve.extensions 參數(shù)配置，加入 .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'),
    },
  },
})

以上就是解決vue3+vite配置unplugin-vue-component找不到Vant組件的詳細內(nèi)容，更多關于vue3 vite配置unplugin的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: