前言

入职公司到现在差不多一个半月了，负责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优化的工作描述，未完待续~~~