按需自动导入 element-plus

日常更新 2023-05-18

按需自动导入 element-plus

1. 导入 unplugin-vue-components和unplugin-auto-import

npm i unplugin-vue-components
npm i unplugin-auto-import

或者

npm i unplugin-vue-components unplugin-auto-import

2. 更改 vite.config.js

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
})

完整配置项：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  server: {
    host: 'xxx.xxx.x.xxx',
  },
  resolve: {
  	//设置路径别名*注意【需要在jsconfig.json配置对应项】
    alias: {
      '@': resolve(__dirname, './src'),
    },
    //vue3 + Vite 引入指定文件时忽略扩展名
    extensions: ['.vue', '.js', '.ts', '.json', '.jsx', '.tsx']
  },
})

jsconfig.json 【针对路径别名，设置对应配置项】

{
    "compilerOptions": {
        "paths": {
          "@/*": ["src/*"]
        }
    },
 }