前言

问题背景
　在本次前端实践项目中,由于并未接触过vite打包.所以在新建项目的时候采用webpack打包方式,好处是简单方便,因为经常使用,但是随着新伙伴的提议,再根据实际开发过程中体积的增加,确实觉得webpack打包方式的速度实在感人,因为打包方式的不同,两者时间差距几乎几何倍的增加

当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。 ---引用之vite官方回答

通俗的讲:
　传统WebPack打包方式是一股脑的将文件与modus全部编译,即使是热启动,也会重新编译,而这个过程的耗时会随着modus的增加而增加.
而vite在启动过程中并不会全部加载modus,它会根据你的需要即时编译,更严谨的说就是,因为现代浏览器原生支持了ESM方式,vite在此启动基础上,将打包过程交给了浏览器动态执行,也就是当页面需要呈现在开发者屏幕上时才会被处理

迁移过程

安装工具并配置文件结构

选中你的webpack项目目录页面,右键使用终端打开,以在当前目录执行接下来的代码

不管目录中存不存在node_Modus目录都建议执行一次install 以确保模块处于正常待定状态

npm install

此时需要全局安装一个代码迁移工具 wp2vite ,此工具可以根据 vue.config.js 生成 vite.congfig.js 配置文件,关于此工具的说明文档可以参考官方仓库 wp2vite
需要注意的是,这个工具也有很多的坑

npm install -g wp2vite
wp2vite --config=./vue.config.js //你的webpack配置文件

报错点1

如果遇到这个错误就说明跟我一样是在win11系统中自带的终端程序中运行,win10系统在 PowerShell中运行也会报错,只需要输入CMD并重新执行报错代码即可

报错点2

当执行完npm install命令之后,大概率会遇到此报错,解决方法就是在install之后添加--legacy-peer-deps如:

npm install --legacy-peer-deps

当执行完上述所有代码之后,我们需要对项目结构进行配置

• 删除原有public目录下的index.html文件
• 修改根目录中的index.html,引用自己的main.js/ts文件

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

注意:配置Vite.config.js

1. 设置alias,也就是目录别名,增加新的绝对值@

let alias = {
    '.git': path.resolve(__dirname, './.git'),
    'docs': path.resolve(__dirname, './docs'),
    'node_modules': path.resolve(__dirname, './node_modules'),
    'public': path.resolve(__dirname, './public'),
    'src': path.resolve(__dirname, './src'),
    '@': path.resolve(__dirname, 'src'),
  }

2. 设置proxy,如果你的项目设置代理的话
   

意此时写法有变，将pathRewrite修改为rewrite，举个栗子
原项目vue.config.js

    '/api': {
        target: `http://localhost:7777`,
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': '',
        },
      },

新项目vite.config.js

'/api': {
      target: `http://localhost:8180`, 
      changeOrigin: true,
      ws: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    },

此时使用vite运行项目,正常情况下就可以跑起来了

npm run dev

但某些情况下因为插件的版本问题造成的一个 vite.createFilter is not a function错误
这是一个vite版本不兼容的错,请看下面解决方法:

报错点三

我们只需要将其版本进行升级或者降级即可(任选其一)

//升级
npm install -D vite@^3.0.0
pnpm add -D vite@^3.0.0
//降级
npm i @vitejs/plugin-vue@2.3.3

当看到Done字样即可,重新运行

重新运行看到此项字样即可迁移成功,

但是别太高兴,在用来某些插件的情况下,即时运行成功,页面也白屏,并显示不出来

Require报错

F12控制台上看到一行报错'Require is not defined'

此项报错是因为vite并不支持require导入,如果项目中使用此项导入媒体或者json数据,我们使用相同功能的其他工具代替即可
解决方法一:使用import.meta.globEager()代替,示范如下

const requires = require.context('@/modules', true, /router\.ts$/);//原有
const requires = import.meta.globEager("@/modules/*/router.ts")//修改后

此项推荐在配置路由等操作时使用
解决方法二:使用import直接导入,示范如下
修改前:

修改后:

此项方法推荐用于媒体或JSON等导入,但是编译器发生了一个报错,如果使用VScode,会提示一个为找不到模块“../mock/MenuData.json”。请考虑使用 "--resolveJsonModule" 导入带 ".json" 扩展的模块。ts(2732)的错误,这是因为vite中TS并没有对JSON等文件导入的支持,我们前往tsconfig.json文件中开启,值得注意的是,加入此项功能据说会对jQuery产生影响,具体我并不清楚,请根据实际情况取舍

"resolveJsonModule":true,      
"esModuleInterop": true,

npm run dev

目前就这么结束了,如果有其中步骤遇到更好的解决方案,欢迎讨论

参考资料

wp2vite仓库
vue3+vite项目，安装依赖运行报错....
【webpack转vite】操作流程与问题
angular引入json文件报错找不到模块....