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

news2025/7/14 23:35:01

一、修改依赖

首先修改 package.json，修改启动方式与相应依赖
在这里插入图片描述
移除vue-cli并下载vite相关依赖，注意一些peerDependency如fast-glob需要手动下载

# 移除 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，不再支持这种方式。

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，动态导入目录中的文件

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')

四、总结

特性	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）