vue cli 3 那些事兒

時間 2019-12-13

標籤 vue cli 那些事兒简体版

原文原文鏈接

配置 eslint

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

...
  "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 中加入這個命令:html

"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 的文件，在文件中寫下面的內容：vue

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

根據文檔的描述，每個環境變量都要寫成 KEY=value 的形式，若是這個變量是自定義的變量，並且須要在頁面中使用，還要加上 VUE_APP 前綴。看到這裏，有同窗可能有疑問了，NODE_ENV 不該該也是 debug 嗎？node

這裏的 NODE_ENV 是一個特殊的變量，若是你但願 debug 模式像 production 那樣構建出代碼，就必須將NODE_ENV設置成 production，不然打包出來的東西可能不是你想要的。咱們能夠理解成建立了一個debug模式，這個模式繼承自production模式。webpack

接下來說一下VUE_APP_HOST這個變量，咱們注意到這個變量的前綴帶有VUE_APP,根據文檔，若是你須要在頁面js中使用這個環境變量，就必須帶這個前綴，否則在頁面中這個變量是無效的。web

配置 index.html

vue-cli3 中的 index.html 文件被放在了與 src 目錄同級的 public 目錄下，能夠在 index.html 根據環境變量實現一些邏輯，舉個例子，我想在 production 模式中加入騰訊移動統計相關的代碼:vue-cli

<% 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目錄下，來配合後端的同窗:npm

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

並且這個路徑不會受項目路徑的限制，就是說build 出來的index.html徹底能夠在vue項目根目錄的同級或者上層。json

配置生成的 js/css 目錄

這個路徑由outputDir字段來控制。就是將生成的js,css,img等放到哪一個文件目錄下。這個路徑一樣不受項目目錄的約束。經過indexPath和outputDir，咱們就能夠作到在build時，index.html和 css,js等靜態資源分開存放。segmentfault

配置資源加載路徑

這個路徑由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等放到哪一個文件目錄下。這個路徑一樣不受項目目錄的約束。

配置資源加載路徑

配置多頁面

由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'的區別，能夠參考這裏