基于 Vite + Vue3 项目中三种引入 Element Plus 方式的对照说明_element plus vite

有时候打包vue代码后，部署到服务器，发现部门页面不显示，那有可能是 element-plus 没有打进包里，比如：echarts组件显示了

这里可能得原因就是 自动导入包失败了，即本文的方式三失效了。

方式一：手动完整引入（不推荐）

只需要在 main.js 里面引入并配置即可：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入组件和样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
 
// 注册
app.use(ElementPlus)
app.mount('#app')

这样做的好处是简单方便，但问题也很明显，那就是打出来的包是包含了所有组件源代码和样式代码的，导致 chunk 包的体积很大，而且相应的打包时间也就会很长，显然对于项目优化来说是很不友好的，所以这是最不推荐的引入方式，实际打包后的文件体积如下：

方式二：手动按需引入（相对推荐）

先在 main.js 里面进行配置：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { ElButton, ElAlert } from 'element-plus'
 
const app = createApp(App)
 
app.use(ElButton)
app.mount('#app')

还需要先安装插件：

npm i unplugin-element-plus -D

• 1

然后在 vite.config.js 里面配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ElementPlus from 'unplugin-element-plus/vite'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // unplugin-element-plus 用于手动按需引入组件时，自动引入该组件的样式代码
    ElementPlus()
  ],
})

手动按需引用，打出来的包是只包含了使用了的组件的源代码，其中 ElAlert 只 import 而未使用也会被 tree-shaking 清理掉。配合使用 unplugin-element-plus 这个插件可以做到自动引入组件的样式代码。这种方式的好处是相对简单方便，打出来的包的体积是根据使用了的组件的数量来的，所以使用数量越少相应的体积也就越小，打包时间也会更短，当然每次新增组件引用时都需要在 main.js 里面配置一下会稍显繁杂，相对来说这是比较推荐的。实际打包后的文件体积如下：

方式三：自动按需引入（最推荐）

需要先安装插件：

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

• 1

然后在 vite.config.js 里面配置：

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'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

只需要上述配置即可，不需要在 main.js 里面做任何其它配置了，使用 unplugin-auto-import 和 unplugin-vue-components 会自动在编译过程中将我们在业务代码里面使用到的组件以按需引入的方式进行引入，包括了组件代码和样式代码，这样的方式对开发者来说是最方便的，同时也保证了代码体积和打包时间上的优化处理，总的来说这是最推荐的方式。实际打包后的文件体积如下：