vue需要升级到2.7版本
- 安装
npm i -D vite@4 vite-plugin-vue2@2- 添加
vite.config.js配置文件
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
{
"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
> 1%
last 2 versions
not dead
not ie 11
- 将
public/index.html移至根目录下，删除插值模板，添加script
<!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 插件
// 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
// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import { setupLayouts } from 'virtual:generated-layouts' // add
import generatedRoutes from '~pages' // 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
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-fiximport antdvFix from 'vite-plugin-antdv-fix' // add
export default defineConfig({
plugins: [
createVuePlugin(),
antdvFix(), // add
...
]
})