【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 不兼容，这时你除了将其用一个独立的 <script> 标签引入没有别的选择。

看一下我项目的 public 应用

复制老项目的 src 文件夹，替换新项目的 src

这里先替换，暂时无论它

接下来，npm run serve 启动项目吧

不出意外，确定会有报错的，莫慌，按提示一步步更改。

Failed to mount component: template or render function not defined.

[Vue warn]: Failed to mount component: template or render function not defined.
复制代码

缘由分析：

• 默认引入vue为runtime版本？
• require引入组件没有.default

解决：

• 根目录创建 vue.config.js

vue.config.js 介绍请自行看文档吧，码字好累啊

module.exports = {
  configureWebpack: config => {
    config.resolve.extensions = ['.js', '.vue', '.json']
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', resolve('src'))
   }
}
复制代码

• require 组件时加 .default

注意 require 按需引入 vue 组件的时候，后面加上 .default。

例：require('button.vue').default

缘由：原先webpack 在打包 export default 导出的内容结果都是：

{
  default: {
    // 内容
  }
}
复制代码

webpack3+ 打包的内容结果是：

{
  // 内容
}
复制代码

Autoprefixer applies control comment to whole block, not to next rules.

/* autoprefixer：off */
...
/* autoprefixer：on */

修改成
/* autoprefixer：ignore next */
...
复制代码

You should write display: flex by final spec instead of display: box

display: flex
代替
display: box
复制代码

eslint报错

由于老项目并未启用 eslint，跑了下 npm run lint，errors大概有 1000+，花了半天时间修复了全部错误。

提供一份 eslint 配置和 vscode 设置中 eslint 的处理（这个其实在我以前的回顾两年前整理的前端规范中有描述）

.eslintignore

src/assets
src/lib
src/ngmmdebug.js
dist/
output.js
复制代码

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/recommended',
    'eslint:recommended',
    'standard'
  ],
  rules: {
    'camelcase': [0, {
      'properties': 'always'
    }],
    'no-console': 'off',
    'no-debugger': 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}
复制代码

vscode设置eslint相关

"eslint.options": {
    "configFile": ".eslintrc.js"
  },
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
复制代码

码字好累啊，仍是敲代码自在

码字好累啊，要放飞自我啊

码字好累啊，今天周六啊！个人周末在哪里

后面会是更多的升级问题修复以及webpack优化的工做描述，未完待续~~~