前言
入职公司到现在差不多一个半月了，负责A业务线，项目涉及运营后台、A业务客户端等。之前已经完成了对运营后台A模块的重构工作，最近也已经初步完成了对A业务客户端项目的升级，所以今天分享一下新项目基于vue-cli3做工程的升级。
*PS：虽然有点标题党，但是**50%*这个数字并非空穴来风，后面会有初步数据对比...
另：本人前端小菜，本文不作为任何形式的教程、指南，个人实际工作的分享，不喜勿喷
起因
很多人会问为什么要做项目升级？这个我也不好描述，每个公司环境不一样
我也想问为什么不做升级？大概率是因为懒和怕生产出问题吧，哈哈...
原项目基于 vue-cli2.8.1 + webpack2.2.1 + vue2.4.2 (莫慌，我也感觉很奇怪的版本组合，想一下大概曾经是只升级了语法吧)，本来打算是将 webpack2升级到 webpack4 ，然后在项目中增加配置 eslint、GitHooks、Mock，真正动手的时候直接另起项目，基于 vue-cli3.3 构建。
动手 => 项目完成共耗时 2.5 天
新老项目初步对比
因为项目未测试上线，所以生成环境运行数据对比缺失。
单看 npm i 和 npm build前后对比，提速 50% 不过分吧
| old | new | |
|---|---|---|
| 依赖包 | 1604 | 1400 |
| install耗时 | 37.507s | 19.547s |
| build耗时 | 24517ms | 11569ms |
| dist目标文件 | 714.57KB | 657.94KB |
| eslint | - | standard（recommand严格模式） |
| GitHooks | - | ✔️ |
| mock集成 | - | ✔️ |
| 其他优化 | 陆续进行中 | |
| ... |
Vue-cli3 升级
安装
摘抄
vue-cli文档
Vue CLI 的包名称由
vue-cli改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x)，你需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载它。 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
可以使用下列任一命令安装这个新的包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确 (3.x)：
vue --version
复制代码创建项目
vue-cli文档
运行以下命令来创建一个新项目：
vue create my-project
复制代码接下去选取一个 preset。
你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。
~/.vuerc 被保存的 preset 将会存在用户的 home 目录下一个名为
.vuerc的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。在项目创建的过程中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入
~/.vuerc。
分享一份该项目的 preset（老项目用的 less，个人更倾向于 stylus、scss）
{
"useTaobaoRegistry": false,
"presets": {
"bolin": {
"useConfigFiles": false,
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-eslint": {
"config": "base",
"lintOn": [
"save"
]
}
},
"router": true,
"routerHistoryMode": true,
"vuex": true,
"cssPreprocessor": "less"
}
}
}
复制代码vue create 命令有一些可选项，你可以通过运行以下命令进行探索：
vue create --help
复制代码项目迁移
Package.json包迁移
项目生成后，首先对 package.json 包进行迁移，script 的命令先不着急。
迁移包其实简单粗暴，将项目中用到的包对号入座进行迁移
static迁移到puclic文件夹，src文件夹替换
老项目的 static 全部迁移到 public 文件夹中，index.html 迁移到 public
在 vue-cli3 ，public 文件夹不会被 webpack 处理，并部署在网站根目录
官网对public文件夹应用场景的举例：
- 你需要在构建输出中指定一个文件的名字。
- 你有上千个图片，需要动态引用它们的路径。
- 有些库可能和 webpack 不兼容，这时你除了将其用一个独立的