vue2项目迁移vite指南
本文将会把一个使用@vue/cli 搭建的 vue 2 项目迁移到 vite
仓库地址：vue2-migrate-vite
注意：vue 需要升级到 2.7 版本
一、安装、配置 vite
- 安装
vite@4和支持vue@2的插件
npm i -D vite@4 vite-plugin-vue2@2.0.3
- 添加
vite.config.js配置文件
javascript
import path from 'node:path'
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
export default defineConfig({
plugins: [createVuePlugin()],
server: {
host: '0.0.0.0',
port: 8080
},
resolve: {
alias: {
'@': path.join(__dirname, 'src')
}
}
})
- 修改
package.json
json
{
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
二、删除依赖和文件
- 删除
babel，@vue/cli，sass-loader和core-js相关依赖
npm un @babel/core @babel/eslint-parser @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-vuex @vue/cli-service sass-loader core-js
- 删除
babel.config.js，vue.config.js文件
三、文件修改
.browserslistrc添加not ie 11
text
> 1%
last 2 versions
not dead
not ie 11
- 将
public/index.html移至根目录下，删除插值模板，添加script
html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="./favicon.ico" />
<title>vite-vue2</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.js"></script>
</body>
</html>
四、环境变量
- 环境变量文件前缀改为
VITE_APP - 使用
import.meta.env引入环境变量 router/index.js中的base: process.env.BASE_URL可以删除
五、使用文件路由和布局
- 安装依赖
npm i -D vite-plugin-pages@0.32 vite-plugin-vue-layouts@0.8
- 配置 vite 插件
javascript
// vite.config.js
import Pages from 'vite-plugin-pages' // add
import Layouts from 'vite-plugin-vue-layouts' // add
export default defineConfig({
plugins: [
createVuePlugin(),
Pages({
routeBlockLang: 'yaml'
}), // add
Layouts() // add
]
//...
})
- 修改
router/index.js
javascript
import generatedRoutes from '~pages'
import { setupLayouts } from 'virtual:generated-layouts'
// src/router/index.js
import Vue from 'vue' // add
import VueRouter from 'vue-router' // add
Vue.use(VueRouter)
const routes = setupLayouts(generatedRoutes) // edit
const router = new VueRouter({
mode: 'history',
routes
})
export default router
- 将
views目录改为pages然后按照文件路由规则修改
六、其他问题
element-ui部分组件没有渲染：在vite.config.js配置resolve.extensions和resolve.alias
javascript
export default defineConfig({
//...
resolve: {
extensions: ['.js', '.vue', '.json'], // add
alias: {
'@': path.join(__dirname, 'src'),
vue: 'vue/dist/vue.esm.js' // add
}
}
})
ant-design-vue打包问题：安装vite-plugin-antdv-fix并添加到plugins中
npm i -D vite-plugin-antdv-fix
javascript
import antdvFix from 'vite-plugin-antdv-fix' // add
export default defineConfig({
plugins: [
createVuePlugin(),
antdvFix() // add
//...
]
})