前言
随着这些年前端技术的飞速发展，几年前的一些老项目在最新的环境下很可能会出现烂掉的情况。如果项目不需要升级，只需要把编译后的文件放在那里跑而不用管的话还好。但是，某一天产品跑过来给你讲要升级某一个功能，你不得不去维护的时候，你可能发现，你的工具链都成问题了。
我就遇到了这样的一个情况。一个五六年前基于 webpack + vue2 开发的一个项目，现在需要升级，这个过程一定是很有纪念意义的，所以特地记录下来。
确定实施方案
- 用最新的脚手架搭建底层架构。
- 将原有代码
src目录整体移过来。 - 针对问题，一一排除
开干。
# 当前环境版本
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
根据官方的文档，以及我们项目的实际情况，我们执行命令，如下图所示：
pnpm create vue@legacy
根据提示，我们执行下面的命令，将项目运行起来。
cd koa-cms-user
pnpm install
pnpm dev
接下来，我们把原来项目文件的 src 目录完整的替换这个脚手架下生成的 src 目录。
直接运行一下，肯定是跑步起来的。
逐一排查问题
OK，全部都是错误，我们来逐一排查，首先我们遇到的依赖的三方库没有安装，这里，我们一一安装上。
我不建议一次性安装，提示哪个，我们就安装哪个。
使用 sass 替代 node-sass
以前，我们的老项目很多都依赖 node-sass 这个库，这里，我们用 sass 进行替代。需要逐一的是 sass 升级更新比较快，导致升级后语法有些更新，所以为了兼容我们之前写的 scss 文件，我建议使用一个稍微老一点的版本，我这里选择的是 1.66.0 这个版本。
pnpm add sass@1.66.0
原有部分引用文件省略 .vue 后缀的，加上
依赖基本安装好之后，发现在控制台中有 404 的报错，经过排查，发现老代码中，有部分引用，省略了 .vue 的文件后缀，补充上之后，解决了这个问题。
// old
import Frame from '@/layout/frame'
// new
import Frame from '@/layout/frame.vue'
部分函数更新
在老项目中，有一些依赖的三方库，可能因为某些原因，不再适用。因此这些业务代码，需要更新调整。我也遇到了这个问题，主要是 RSA 加密部分的内容。这些，我前几天写过一些文章，大家可以参考：
node 后端和浏览器前端，有关 RSA 非对称加密的完整实践， 前后端匹配的代码演示
浏览器原生 Web Crypto API 实现 SHA256 Hash 加密
大家各自的情况应该都不一样，这里不详述了。一般而言，代码量不会太大。
webpack 自定引入文件的代码替换为 vite 的方式
在我原有的项目中，使用了 webpack 的特性写了一些代码，主要是用来自动注册组件，代码如下
// 自动注册组件文件
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 特性的代码
// 自动注册组件文件
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_ 。
此外，在使用的地方也有区别，如下所示:
// 在 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/
# 安装
pnpm add @biomejs/biome -D
在项目根目录创建 biome.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"
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173",
"format": "biome format --write ./src"
},
然后在命令行运行格式化命令
pnpm format
小结
经过轮番混战，终于顺利的把项目从 webpack 更换到了 vite，并且使这个若干年前的古董项目在最新的环境下运行起来了。
如果你也有类似的需求，并且遇到其他问题，欢迎在评论区交流。
最后，如果本文对你有所增益，希望看官您用发财的小手点个小赞哈！
