把原来vue2后台项目（本站）的webpack换成vite，简单对比了一下。

启动：webpack 17秒，vite 3秒

开发环境页面加载：

登录页加载：webpack 58个请求9.5M，vite 55个请求3.7M

首页加载： webpack 64个请求9.4M，vite 61个请求3.6M

打包：webpack 28秒，vite 15秒

正式环境页面加载：

登录页加载：webpack 75个请求1.9M，vite 21个请求1.7M

首页加载： webpack 81个请求1.8M，vite 27个请求1.6M

需要修改的内容：

vite.config.js

import vue from '@vitejs/plugin-vue'

修改为

import vue from '@vitejs/plugin-vue2'

index.html

原文件在public目录中，需要移动到项目根目录

有类似<%= BASE_URL %>的webpack变量字符串都需要删除，否则会报错

引用应用入口文件：

<script type="module" src="/src/main.js"></script>

（webpack+vue2是在vue.config.js配置中默认作为入口文件的，不需要手动引用）

element-ui

在main.js中引用element-ui的同时需要引用：

import 'element-ui/lib/theme-chalk/index.css'

（webpack+vue2是使用babel.config.js配置引用样式的，不需要手动引用）

打包后table组件无法渲染问题，需要在vite.config.js中添加配置，使用esm规范版本的vue，该问题是element-ui的部分组件（含table）使用了cjs语法引用了vue，而本应用（main.js）使用的是esm语法。

export default defineConfig({
	resolve: {
		alias: {
			'@': resolve(__dirname, './src'),
			'vue': 'vue/dist/vue.runtime.esm.js',//使用esm规范的vue
		}
	},
})

其他

process.env 环境变量需要替换成 import.meta.env

使用跨域代理不能定义端口号，否则代理无效

使用“~@”开头引用图片和样式需要删除波浪线（需要在vite.config.js中配置好“@”作为源码目录路径）