vue-element-admin升级到vite

为什么要升级

尝试新的构建工具，熟悉vite配置，体验vite的极致的开发环境速度和生产构建速度。

什么是Vite

vite开发环境输出的ESM, 无须把源码中的ESM编译成ES5语法，所以速度极快。

xml 复制代码

<!-- ESM -->
<script type="module" src="./src/main.js"></script>
<!-- es5 -->
<script data-rms="1" crossorigin="anonymous" src="/rp/l5qlKyb5rPv_F2YU5blrntiAB0c.br.js" type="text/javascript"></script>

vite内部封装了esbuild, 理论上webpack5也可以引入esbuild-loader，但是实际试过效果并不好。

开发环境升级步骤

参考官方vite项目，基本配置。

安装vite4，vite5不兼容vue2
添加vite.config.js

删除public/index.html，项目最外层添加index.html, index.html引入入口js

html 复制代码

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>vue-element-admin-vite</title>
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
        <script type="module" src="./src/main.js"></script>
      </body>
    </html>
    ```

解析scss文件
1. 安装sass
2. vite.config.js添加additionalData及resolve配置

javascript 复制代码

    import { defineConfig } from 'vite'
    import { createVuePlugin } from 'vite-plugin-vue2'
    import { createHtmlPlugin } from 'vite-plugin-html'
    import styleImport from 'vite-plugin-style-import'
    const path = require('path')

    export default () => {
      return defineConfig({
        resolve: {
          extensions: ['.vue', '.js'],
          alias: {
            '@': path.resolve(__dirname, './src')
          }
        },
        css: {
          preprocessorOptions: {
            scss: {
              additionalData: '@import "@/styles/variables.scss";'
            }
          }
        },
        plugins: [
          createHtmlPlugin({
            minify: true
          })
        ]
      })
    }
    ```

jsx语法支持

javascript 复制代码

// vue-config.js添加jsx
plugins: [
  createVuePlugin({
    jsx: true
  })
]

// 涉及jsx语法的script
<script lang="jsx">

require('path')是 wepback语法，vite不支持，换用'path-browserify'

javascript 复制代码

import path from 'path-browserify'

element-ui组件按需引入

安装npm包 vite-plugin-style-import
vite-config.js添加配置plugin

javascript 复制代码

    styleImport({
        libs: [
          {
            libraryName: 'element-ui',
            esModule: true,
            resolveStyle: name => {
              return `theme-chalk/${name}.css`
            }
          }
        ]
      })
    ```

tui-editor npm包无法安装，删除相关页面及代码
vite不支持CommonJS语法，require要换成import. 比如：

javascript 复制代码

// commonjs语法
const version = require('element-ui/package.json').version // element-ui version from node_modules

// ESM
import { version } from 'element-ui/package.json'

require.context不支持，用import替换

javascript 复制代码

// src/store/index.js
import app from './modules/app'
import errorLog from './modules/errorLog'
import permission from './modules/permission'
import settings from './modules/settings'
import tagsView from './modules/tagsView'
import user from './modules/user'

const store = new Vuex.Store({
  modules:{
    app,
    errorLog,
    permission,
    settings,
    tagsView,
    user
  },
  getters
})

process.env.VUE_APP_BASE_API是vuecli变量，未定义，替换为空字符串

至此升级完成

可以看到开发环境，输出的目标js是ESM

升级效果

开发环境启动速度的确是秒开

总结

Vite 开发环境运行，直接输入ESM真的很快
但是vue-element-admin要完全升级到vite，有兼容难度。因为项目模块很多是CommonJS的，需要改动。后续项目升级到element-plus+vue3+vite5+ts，再次感受vite的速度。

项目地址： github.com/jovenwang12...