webpack 项目升级成vite项目

本文主要是介绍webpack 项目升级成vite项目，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

将webpack升级成vite得步骤：

1.把 public/index.html 移动到项目根目录，把文件中的 %PUBLIC_URL% 去掉
// %PUBLIC_URL%就是指向对应的public文件夹的绝对路径

 2.把 src/index.js 入口文件 ，改成 src/main.ts ，并在 index.html 文件中引入<script type="module" src="/src/main.ts"></script>

 3.整理一下 package.json , 删除不需要的依赖，如 eslint, babel, webpack,各种 loader 和 plugin 等依赖，修改 scripts, 启动以及打包命令  vue-cli-service serve ==>vite ;vue-cli-service build ==>vite build修改 devDependencies , 添加vite（ "vite": "^2.4.2",）

4.删除 node_modules 文件夹，删除 yarn.lock package-lock.json ，并重新安装依赖

  5.删除 vue.config，以及包含了一些 webpack 的配置和启动脚本 ，如果 你的项目没有，可以忽略

6.在根目录新建 vite.config.js 配置文件，迁移配置

7.由于 vite 不支持 require() 导入, 你需要找到你项目中 
全部的 require 函数进行手工修改，比如动态图片：require(`./images/device-header-${index + 1}.png`)改成new URL(`./images/device-header-${index + 1}.png`, import.meta.url).href;
如果你使用了 require.context 一次导入多个文件：
const modulesContext = require.context('../../views', true, /\.routes\.ts$/)改成
const modulesContext = import.meta.globEager('../../views/**/*.routes.ts')

8.有的项目中使用了环境变量判断 
如 process.env.NODE_ENV === 'development' 
在node环境defineConfig({mode}=>{mode})
在前端环境import.meta.env
环境变量的的修改：VUE_APP_XX ==> VITE_XX

这篇关于webpack 项目升级成vite项目的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---