vue cli 3 那些事儿

配置 eslint

可在 package.json 中的 eslintConfig 中配置，好比容许在代码中使用 console，package.json 中配置以下

...
  "eslintConfig": {
    "root": true,
    "env": {"node": true},
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": 0
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

配置环境变量

咱们常常须要根据环境变量来作出一些变化，好比：在测试时链接测试服务器，在上线时使用生产服务器：咱们能够新建一个 npm run debug 命令，经过这个命令，能够在 build 以后保证代码请求的是测试服务器的 api。首先咱们要在 package.json 中加入这个命令:

"scripts": {
    "serve": "vue-cli-service serve",
    "dev": "vue-cli-service serve",
    "debug": "vue-cli-service build --mode debug",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

这样咱们就建立了一个 debug 模式，那么这个模式下的环境变量要写到哪里呢？咱们须要在 src 的同级目录下建立一个 .env.debug 的文件，在文件中写下面的内容：

NODE_ENV=production
VUE_APP_HOST=https://example.com

根据文档的描述，每个环境变量都要写成 KEY=value 的形式，若是这个变量是自定义的变量，并且须要在页面中使用，还要加上 VUE_APP 前缀。看到这里，有同窗可能有疑问了，NODE_ENV 不该该也是 debug 吗？

这里的 NODE_ENV 是一个特殊的变量，若是你但愿 debug 模式像 production 那样构建出代码，就必须将NODE_ENV设置成 production，不然打包出来的东西可能不是你想要的。咱们能够理解成建立了一个debug模式，这个模式继承自production模式。

接下来说一下VUE_APP_HOST这个变量，咱们注意到这个变量的前缀带有VUE_APP,根据文档，若是你须要在页面js中使用这个环境变量，就必须带这个前缀，否则在页面中这个变量是无效的。

配置 index.html

vue-cli3 中的 index.html 文件被放在了与 src 目录同级的 public 目录下，能够在 index.html 根据环境变量实现一些逻辑，举个例子，我想在 production 模式中加入腾讯移动统计相关的代码:

<% if(process.env.NODE_ENV === 'production'){%>
    <script>
      var _mtac = {};
      (function() {
        var mta = document.createElement("script");
        mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
        mta.setAttribute("name", "MTAH5");
        mta.setAttribute("sid", "");
        mta.setAttribute("cid", "");
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(mta, s);
      })();
    </script>
    <% }%>

配置生成的 index.html 路径

这个配置在src目录同级的vue.config.js文件中，有一个indexPath字段，就是它了。若是你是在后端的模版中使用vue，你可能须要将index.html放到后端的views目录下，而不是默认的static目录下，来配合后端的同窗:

module.exports = {
  indexPath: '../../../views/activities/kan/index.html'
}

并且这个路径不会受项目路径的限制，就是说build 出来的index.html彻底能够在vue项目根目录的同级或者上层。

配置生成的 js/css 目录

这个路径由outputDir字段来控制。就是将生成的js,css,img等放到哪一个文件目录下。这个路径一样不受项目目录的约束。经过indexPath和outputDir，咱们就能够作到在build时，index.html和 css,js等静态资源分开存放。

配置资源加载路径

这个路径由publicPath字段来控制。这个字段的含义是，当浏览器拿到你生成的index.html后，该如何访问build出来的app.js和app.css,若是配置出错，将形成app.js，app.css访问不到。与outDir字段的区别是，前者是一个文件目录，后者是在项目部署以后，经过http协议访问的路径。

配置多页面

由pages字段来控制。这个字段接收多个页面配置，每一个页面配置有两种形式：字符串形式和对象形式。

• 字符串形式：

当使用字符串形式时，key是页面名字，value是该页面的入口js；

pages: {

 subpage: 'pages/subpage/main.js'
 
}

有了入口js文件，在build时，webpack会到public目录下找subpage.html做为这个页面的html模板文件。若是没有这个文件，就会使用默认的index.html文件。

• 对象形式

和字符串形式比起来，对象形式就能够更加灵活的配置一个页面：

index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 输出的html 文件路径
      filename: '../../views/coaches/site-info.tpl',
      // 页面要显示的title
      // template 中的 title 标签须要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认状况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },

这里很差理解的是chunks字段，chunks其实就是须要把哪些静态资源放到生成的index.html中，以上面的index页面为例，若是你去掉index chunk，则生成的index页面不会有引用index.js的script标签，访问index 页面时，也就不会加载index.js。

关于'chunk-vendors', 'chunk-common'的区别，能够参考这篇文章[]

经常使用技巧

---恢复内容结束---

### 配置 eslint

可在 package.json 中的 eslintConfig 中配置，好比容许在代码中使用 console，package.json 中配置以下

...
  "eslintConfig": {
    "root": true,
    "env": {"node": true},
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": 0
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

配置环境变量

咱们常常须要根据环境变量来作出一些变化，好比：在测试时链接测试服务器，在上线时使用生产服务器：咱们能够新建一个 npm run debug 命令，经过这个命令，能够在 build 以后保证代码请求的是测试服务器的 api，首先咱们要在 package.json 中加入这个命令:

"scripts": {
    "serve": "vue-cli-service serve",
    "dev": "vue-cli-service serve",
    "debug": "vue-cli-service build --mode debug",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

这样咱们就建立了一个 debug 模式，那么这个模式下的环境变量要写到哪里呢？咱们须要在 src 的同级目录下建立一个 .env.debug 的文件，在文件中写下面的内容：

NODE_ENV=production
VUE_APP_HOST=https://example.com

根据文档的描述，每个环境变量都要写成 KEY=value 的形式，若是这个变量是自定义的变量，并且须要在页面中使用，还要加上 VUE_APP 前缀。看到这里，有同窗可能有疑问了，NODE_ENV 不该该也是 debug 吗？

这里的 NODE_ENV 是一个特殊的变量，若是你但愿 debug 模式像 production 那样构建出代码，就必须将NODE_ENV设置成 production,不然打包出来的东西可能不是你想要的。咱们能够理解成建立了一个debug模式，这个模式继承自production模式。

接下来说一下VUE_APP_HOST这个变量，咱们注意到这个变量的前缀带有VUE_APP,根据文档，若是你须要在页面js中使用这个环境变量，就必须带这个前缀，否则在页面中这个变量是无效的。

配置 index.html

vue-cli3 中的 index.html 文件被放在了与 src 目录同级的 public 目录下，能够在 index.html 根据环境变量实现一些逻辑，举个例子，我想在 production 模式中加入腾讯移动统计相关的代码:

<% if(process.env.NODE_ENV === 'production'){%>
    <script>
      var _mtac = {};
      (function() {
        var mta = document.createElement("script");
        mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
        mta.setAttribute("name", "MTAH5");
        mta.setAttribute("sid", "");
        mta.setAttribute("cid", "");
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(mta, s);
      })();
    </script>
    <% }%>

配置生成的 index.html 路径

这个配置在src同级的vue.config.js文件中，有一个indexPath字段，就是它了，若是你是在后端的模版中使用vue，你可能将index.html放到views目录下，而不是默认的static目录下，来配合后端的同窗:

module.exports = {
  indexPath: '../../../views/activities/kan/index.html'
}

并且这个路径不会受项目路径的限制，就是说build 出来的index.html彻底能够在vue项目根目录的同级或者上层。

配置生成的 js/css 目录

这个路径由outputDir字段来控制。就是将生成的js,css,img等放到哪一个文件目录下。这个路径一样不受项目目录的约束。

配置资源加载路径

这个路径由publicPath字段来控制。这个字段的含义是，当浏览器拿到你生成的index.html后，该如何访问build出来的app.js和app.css,若是配置出错，将形成app.js，app.css访问不到。与outDir字段的区别是，前者是一个文件目录，后者是在项目部署以后，经过http协议访问的路径。

配置多页面

由pages字段来控制。这个字段接收多个页面配置，每一个页面配置有两种形式：字符串形式和对象形式。

• 字符串形式： 当使用字符串形式时，key是页面名字，value是该页面的入口js；

pages: { subpage: 'pages/subpage/main.js' }

有了入口js文件，在build时，webpack会到public目录下找subpage.html做为这个页面的html模板文件。若是没有这个文件，就会使用默认的index.html文件。

• 对象形式 和字符串形式比起来，对象形式就能够更加灵活的配置一个页面：

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 build 时 index.html 的输出路径
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签须要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认状况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 而且若是找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

这里很差理解的是chunks字段，chunks其实就是须要把哪些静态资源放到生成的index.html中。以上面的index页面为例，若是你去掉index chunk，则生成的index页面不会有引用index.js的script标签，访问index 页面时，也就不会加载index.js。 关于'chunk-vendors', 'chunk-common'的区别，能够参考这里