webpack 项目升级成vite项目

最新推荐文章于 2025-09-10 17:34:33 发布

原创最新推荐文章于 2025-09-10 17:34:33 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文详细描述了如何将项目从Webpack升级到Vite，包括调整文件结构、修改配置、处理require导入和环境变量的迁移。

将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