配置 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'的區別，可以參考這裏