【vue-cli3升级】老项目提速50%（一）

前言

入职公司到现在差不多一个半月了，负责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 不兼容，这时你除了将其用一个独立的