从 webpack 迁移到 vite 操作笔记。

原创已于 2025-08-27 13:17:57 修改 · 445 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #笔记 #前端 #vue.js #javascript

于 2025-08-19 16:46:05 首次发布

vue 专栏收录该内容

11 篇文章

订阅专栏

从 webpack 迁移到 vite 操作笔记。

项目中原先用的 NodeJS版本是V14.20.0。webpack 版本是 webpack@4.47.0 准备使用 NodeJS V20.1.1 。 vite@4.5.14 来替换

状态	node版本	构建工具
迁移前	V14.20.0	webpack@4.47.0
迁移后	V20.1.0	vite@4.5.14

开始工作

1、更换Node版本

卸载当前Node版本，以NVM为例

nvm ls
nvm install 20.1.0
nvm use 20.1.0

2、检查当前`package.json`文件更新依赖

检查当前依赖支持的node版本
npm view <package-name> engines     # 输出 { node: ">=14.0.0" } 
# 或
npm run dev  # 查看运行的报错

我的方法：直接复制文件丢给AI 让ta给我检查
然后将 AI 给出版本更新到package.json中

3、安装Vite

# 删除 node_modules & package-lock.json
npm cache clean --force  #清空一下缓存
# 全局删除 旧版本
npm uninstall -g @vue/cli
# 删除 webpack依赖
npm remove @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-typescript @vue/cli-plugin-vuex


# 安装新版本
npm install -g @vue/cli
# 安装vite  
npm install vite@^4 @vitejs/plugin-vue@^4 --save-dev    # vite 4 版本
# ts 支持
npm install vite-plugin-vue-type-imports --save-dev

更改 `.eslintrc.js` 中

// eslint 支持
module.exports = {
  root: true,
  env: {
    node: true,
    'vue/setup-compiler-macros': true // 添加这一句
  },
}

更改 `tsconfig.json`

{
  "compilerOptions": {
  	"types": [....,"vite/client"], // 添加这一句
  }
}

变更首页

将index.html 从 public 目录移到根目录下

<!-- 基础配置  -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>平台</title>
  </head>

  <body>
    <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
  </body>
</html>

配置环境

项目目录下新建 .env.dev文件

# 请求地址 
VITE_APP_PROXY = http://loaclhost:8080  

# axios 的 baseApi
VITE_APP_BASE_API = /api

配置 `vite.config.ts`

基础配置

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import vueTypeImports from "vite-plugin-vue-type-imports";

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    plugins: [vue(), vueTypeImports()],
    resolve: {
      alias: {
        "@": "/src", // 确保与你的项目结构匹配
      },
    },
    server: {
      // 代理配置
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: env.VITE_APP_PROXY,
          changeOrigin: true,
          ws: true,
          // 路径重写
          rewrite: path => path.replace(new RegExp(`^${env.VITE_APP_BASE_API}`), ""),
        },
      },
    },
  };
});

更改 `package.json` 配置

  "scripts": {
    "dev": "vite --mode dev",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },