vue2 + webpack 老项目升级 node v22 + vite + vue2 实战全记录

前言

随着这些年前端技术的飞速发展，几年前的一些老项目在最新的环境下很可能会出现烂掉的情况。如果项目不需要升级，只需要把编译后的文件放在那里跑而不用管的话还好。但是，某一天产品跑过来给你讲要升级某一个功能，你不得不去维护的时候，你可能发现，你的工具链都成问题了。

我就遇到了这样的一个情况。一个五六年前基于 webpack + vue2 开发的一个项目，现在需要升级，这个过程一定是很有纪念意义的，所以特地记录下来。

确定实施方案

用最新的脚手架搭建底层架构。
将原有代码 src 目录整体移过来。
针对问题，一一排除

开干。

sh 复制代码

# 当前环境版本
fungleo@Studio ~/Sites/myWorks/koa-cms-2025
$ node -v
v22.14.0
fungleo@Studio ~/Sites/myWorks/koa-cms-2025
$ pnpm -v
10.4.1

用 vue 官方脚手架构建底层构架

现在官方推荐使用 create-vue 来构建项目，参考文档地址： https://github.com/vuejs/create-vue

根据官方的文档，以及我们项目的实际情况，我们执行命令，如下图所示：

sh 复制代码

pnpm create vue@legacy

根据提示，我们执行下面的命令，将项目运行起来。

sh 复制代码

cd koa-cms-user
pnpm install
pnpm dev

接下来，我们把原来项目文件的 src 目录完整的替换这个脚手架下生成的 src 目录。

直接运行一下，肯定是跑步起来的。

逐一排查问题

OK，全部都是错误，我们来逐一排查，首先我们遇到的依赖的三方库没有安装，这里，我们一一安装上。

我不建议一次性安装，提示哪个，我们就安装哪个。

使用 sass 替代 node-sass

以前，我们的老项目很多都依赖 node-sass 这个库，这里，我们用 sass 进行替代。需要逐一的是 sass 升级更新比较快，导致升级后语法有些更新，所以为了兼容我们之前写的 scss 文件，我建议使用一个稍微老一点的版本，我这里选择的是 1.66.0 这个版本。

sh 复制代码

pnpm add sass@1.66.0

原有部分引用文件省略 .vue 后缀的，加上

依赖基本安装好之后，发现在控制台中有 404 的报错，经过排查，发现老代码中，有部分引用，省略了 .vue 的文件后缀，补充上之后，解决了这个问题。

js 复制代码

// old
import Frame from '@/layout/frame'
// new
import Frame from '@/layout/frame.vue'

部分函数更新

在老项目中，有一些依赖的三方库，可能因为某些原因，不再适用。因此这些业务代码，需要更新调整。我也遇到了这个问题，主要是 RSA 加密部分的内容。这些，我前几天写过一些文章，大家可以参考：

node 后端和浏览器前端，有关 RSA 非对称加密的完整实践，前后端匹配的代码演示

浏览器原生 Web Crypto API 实现 SHA256 Hash 加密

大家各自的情况应该都不一样，这里不详述了。一般而言，代码量不会太大。

webpack 自定引入文件的代码替换为 vite 的方式

在我原有的项目中，使用了 webpack 的特性写了一些代码，主要是用来自动注册组件，代码如下

js 复制代码

// 自动注册组件文件
const modulesFiles = require.context('./', true, /.vue$/)

const modules = modulesFiles.keys().reduce((modules, path) => {
  const module = modulesFiles(path).default
  const name = module.name
  modules[name] = module
  return modules
}, {})

const install = (Vue, opts = {}) => {
  Object.keys(modules).forEach(name => {
    Vue.component(name, modules[name])
  })
}

export default {
  install,
  ...modules
}

现在，需要更换为 vite 特性的代码

js 复制代码

// 自动注册组件文件

const modulesFiles = import.meta.glob('./**/*.vue', { eager: true })
const modules = Object.entries(modulesFiles).reduce((modules, [_, module]) => {
  const name = module.default.name
  modules[name] = module.default
  return modules
}, {})
const install = (Vue, opts = {}) => {
  Object.keys(modules).forEach((name) => {
    Vue.component(name, modules[name])
  })
}

export default {
  install,
  ...modules
}

webpack .env 变量名，替换为 vite .env 变量名

如果你使用到了 .env 文件的变量，这里需要更改前缀，从 VUE_APP_ 更改为 VITE_ 。

此外，在使用的地方也有区别，如下所示:

js 复制代码

// 在 webpack 中使用 env 变量
console.log(process.env.VUE_APP_API_URL) 
// 在 vite 中使用 env 变量
console.log(import.meta.env.VITE_API_URL)

OK，我这边经过这些调整，项目已经可以跑起来了。

如果你也有类似的需求，可能会遇到更多不一样的问题，只需要借助搜索引擎和 DeepSeek 我相信都能逐一解决的。

使用 Boime 取代以前的 eslint 实现代码格式化等功能

我觉得在代码格式化方面，现在的 boime 相比以前的 eslint 要更好用一些，主要是配置少，安装的包少，以及速度快。当然，在自定义格式相比较而言要略逊一些，但我感觉可以克服。

目前，我开发的项目，都已经使用 boime 在格式化代码了。这里，我也一样准备使用 boime。

官方网站： https://biomejs.dev/

sh 复制代码

# 安装
pnpm add @biomejs/biome -D

在项目根目录创建 biome.json 文件，并录入一下内容：

json 复制代码

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": {
        "noForEach": "off"
      },
      "style": {
        "noParameterAssign": "off"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 120
  },
  "javascript": {
    "formatter": {
      "enabled": true,
      "indentStyle": "space",
      "indentWidth": 2,
      "lineWidth": 120,
      "quoteStyle": "single",
      "semicolons": "asNeeded",
      "trailingCommas": "none"
    }
  }
}

在 package.json 内加上格式化命令脚本 "format": "biome format --write ./src"

json 复制代码

"scripts": {
  "dev": "vite",
   "build": "vite build",
   "preview": "vite preview --port 4173",
   "format": "biome format --write ./src"
},

然后在命令行运行格式化命令

sh 复制代码

pnpm format

小结

经过轮番混战，终于顺利的把项目从 webpack 更换到了 vite，并且使这个若干年前的古董项目在最新的环境下运行起来了。

如果你也有类似的需求，并且遇到其他问题，欢迎在评论区交流。

最后，如果本文对你有所增益，希望看官您用发财的小手点个小赞哈！