vue2项目迁移到vite

背景

为什么选用vite,其实就是为了解决官网说的2个原因

• 缓慢的服务器启动
• 缓慢的更新

风险分析

• 为什么不用vue3？

生产环境需要兼容到ie11，很明显vue3不会支持，同时vue2迁移起来成本较小

• vite对ie11的兼容性支持

官网有 @vitejs/plugin-legacy支持传统浏览器

• 社区支持

社区已经有vue2+vite的例子，可以直接调试，减低学习成本
vite-vue2-simple-starter

• 迁移成本

由于是尝鲜，因此先迁移子系统，把坑都踩了，方便后面深入优化

搭建前端项目模板

首先是把架子打好，毕竟百分80%的代码都可以复用。

• 改造前： 冷启动 30s左右
• 改造后： 冷启动 6s 左右

遇到问题

• process is not defined

访问process.env.xxx无效，替换为

import.meta.env.xxx

• less 不支持 url('~@xxx')写法

直接把~去掉即可

• vite less 不支持@import ~xxx别名

• vite 跨域

module.export = function() {
    server: {
      host: HOST,
      port: process.env.PORT,
      proxy: {
        '/api': {
          target: 'http://1270.0.1:9999',
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, '')
        }
      }
    },
}

• import无法正确识别没有添加.vue后缀

import xxx from "xxxx"

• vite如何使用jquery
• less热更新不生效

重启即可

参考文章

• vite 使用 process.env的问题
• 【VUE】Vite中使用less全局变量
• vite跨域