首先 很多项目正在更新迭代，vue2项目同学也知道vite打包速度 开发模式飞快 ，而且生产模式我给大家贴个图
这是vite构建的vue2的初始化项目性能
这是未使用webpack构建的初始化的vue2项目性能
明显差距很大，那么
vue2使用vite
1.安装插件(一个vite必备，第二个是为了兼容vue2)
npm i -D vite vite-plugin-vue2
2.将public中的index.html拉出来，放在最外层，与package.json同级
3.在index.html中引入
4.router中的index.js修改base
5.创建vite.config.js(没有则需要新建)
import { createVuePlugin } from "vite-plugin-vue2";
import { defineConfig } from "vite";
export default defineConfig({
server: {
host: "localhost",
},
// plugins: [createVuePlugin()],
plugins: [
createVuePlugin({
vueTemplateOptions: {},
}),
],
resolve: {
extensions: [".vue", ".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
alias: [
{
find: "@",
replacement: "/src",
},
],
},
build: {
// 设置vite打包大小控制
chunkSizeWarningLimit: 10000,
},
});
6.修改package.json中的运行与打包命令
–host后面是自己的本地端口号
————————————————
最后 如果配置了多环境的同学看过来
1.根目录新建三个文件：分别对应基本环境.env（始终加载）、开发环境.env.development（npm run dev 加载 ）、.env.production生产环境（build加载）【如果env与development冲突，则后者覆盖前者】
基本环境
VITE_APP_NAME='飞常准'
开发环境
VITE_BASE_URL='localhost:8088/java'
生产环境
VITE_BASE_URL='xxxxxx'
【注意：只有以VITE开头的参数才会暴露出去】
2.使用：
function m1() {
console.log(import.meta.env)
}
