使用vite重构vue-cli的vue3项目

一、修改依赖

首先修改 package.json，修改启动方式与相应依赖

移除vue-cli并下载vite相关依赖，注意一些peerDependency如fast-glob需要手动下载

javascript 复制代码

# 移除 vue-cli 相关依赖
npm remove @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-vuex @vue/cli-service vue-cli-plugin-element-plus vue-template-compiler webpack babel-eslint

# 安装 vite 及相关依赖
npm install -D vite@5 @vitejs/plugin-vue vue-tsc vite-plugin-svg-icons sass fast-glob

二、vite.config.js

vite默认支持ES 语法，将原先 vue-config.js 中的所有 require 手动修改为import，根据文档转为相应格式，如 publicPath 改为 base。

还需注意webpack中导入 layout/index.vue 可以简写为 import Layout from './layout'，Webpack 会自动去尝试：

./Chart.js
./Chart.vue
./Chart/index.js
./Chart/index.vue

Vite默认不会识别vue文件，extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] 手动声明让其识别vue文件

某些js也需要采用ES导出方式

三、启动项目

1. 启动无页面

npm run dev启动项目后发现并没有页面

因为 vite 读的是根目录，将 public/index.html 移动到根目录下并手动引入 main.js 即可。

2. 解决webpack模版语法

npm run dev 启动项目发现报错

这是因为 index.html 中使用到了webpack模版语法

3. 解决非 ESM 风格路径报警

这是 Vite 在处理 element-plus 中的非 ESM 风格路径（如 lib 目录）时报的警告/错误。element-plus/lib/... 是 CJS 构建产物，Vite 默认使用的是 ESM，不再支持这种方式。

javascript 复制代码

import localeEN from 'element-plus/lib/locale/lang/en'
import localeZH from 'element-plus/lib/locale/lang/zh-cn'
// 改为
import localeEN from 'element-plus/es/locale/lang/en'
import localeZH from 'element-plus/es/locale/lang/zh-cn'

4. 解决样式问题

这是因为 vite.config.js 中已经将其变为了全局文件，无需手动引入，会造成加载问题。

5. .env环境变量

这是因为 vite 不再使用 node 的环境变量加载，而是将环境变量在一个特殊的对象上暴露，这个对象即是 import.meta.env, 并且 .env 文件只有 VITE_ 前缀的变量才会被 vite 处理

6. require.context

使用 import.meta.glob 来替代 require.context，动态导入目录中的文件

javascript 复制代码

import { createApp } from 'vue'
import App from '@/App.vue'
import SvgIcon from '@/components/SvgIcon/index.vue' // svg组件

const app = createApp(App)

// 注册为全局组件
app.component('SvgIcons', SvgIcon)

// 使用 import.meta.glob 来动态导入所有 svg 文件
const svgFiles = import.meta.glob('./svg/**/*.svg')

// 动态导入所有 svg 文件
Object.keys(svgFiles).forEach(key => {
  svgFiles[key]() // 这里执行一下，确保文件被导入
})

app.mount('#app')

7. eslint

执行 npm run lint 报错

之前的 Vue CLI 项目使用了 babel-eslint 作为 ESLint 的解析器，而在 Vite 项目中：推荐使用 eslint-plugin-vue。babel-eslint 已废弃，官方已明确不再维护。

eslint-plugin-vue官方地址，官方文档地址，配置步骤如下：

下载依赖，由于原先 vue-cli 项目中使用的 eslint-v6，这里顺带升级为最新的v9，配置文件也由原先的 .eslintrc.cjs、.eslintignore 改为 扁平化配置 的 eslint.config.js。

javascript 复制代码

# 安装经过验证的稳定组合
npm install --save-dev \
  eslint@9.6.0 \
  eslint-plugin-vue@9.26.0 \
  vue-eslint-parser@9.4.2 \
  @babel/preset-env@7.24.5

根据文档将 .eslintrc.cjs、.eslintignore 均写入 eslint.config.js。

parser 由 babel-eslint 改为 vue-eslint-parser。

修改 package.json 中的命令，删除 --ext，并在 eslint.config.js 中约束文件类型。

四、总结

特性	Vite	Vue CLI
开发速度	秒级冷启动，热更新极快（基于 ES 模块）	冷启动慢，热更新慢（基于 Webpack）
打包工具	使用 Rollup 进行生产构建	使用 Webpack
开发服务器	原生支持 ESModules，无需打包即可运行	启动前需先打包（基于 Webpack DevServer）
配置方式	极简配置，基于 `vite.config.js`	较复杂，基于 `vue.config.js`
按需加载	天生支持模块按需加载	手动配置（如 babel-plugin-import）
插件生态	新兴生态，兼容 Rollup 插件	成熟生态，基于 Webpack 插件
构建速度	构建快、体积小（使用 Rollup）	构建慢（Webpack 本身性能瓶颈）
类型支持	默认支持 TypeScript	需要手动开启支持
体积优化	默认支持 Tree-shaking、动态导入	需要配置优化（如 splitChunks）

打包体积由 20.8M 缩小为 3.8M