vue框架篇

vue的優點

輕量級框架：只關注檢視層，是一個構建資料的檢視集合，大小隻有幾十kb；

簡單易學：國人開發，中文文件，不存在語言障礙 ，易於理解和學習；

雙向資料繫結：保留了angular的特點，在資料操作方面更為簡單；

元件化：保留了react的優點，實現了html的封裝和重用，在構建單頁面應用方面有著獨特的優勢；

檢視，資料，結構分離：使資料的更改更為簡單，不需要進行邏輯程式碼的修改，只需要操作資料就能完成相關操作；

虛擬DOM：dom操作是非常耗費效能的，不再使用原生的dom操作節點，極大解放dom操作，但具體操作的還是dom不過是換了另一種方式；

執行速度更快:相比較與react而言，同樣是操作虛擬dom，就效能而言，vue存在很大的優勢。

請詳細說下你對vue生命週期的理解？

總共分為8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。

建立前/後： 在beforeCreate階段，vue例項的掛載元素el和資料物件data都為undefined，還未初始化。在created階段，vue例項的資料物件data有了，el為undefined，還未初始化。

載入前/後：在beforeMount階段，vue例項的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue例項掛載完成，data.message成功渲染。

更新前/後：當data變化時，會觸發beforeUpdate和updated方法

銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函式，說明此時vue例項已經解除了事件監聽以及和dom的繫結，但是dom結構依然存在

為什麼vue元件中data必須是一個函式？

物件為引用型別，當複用元件時，由於資料物件都指向同一個data物件，當在一個元件中修改data時，其他重用的元件中的data會同時被修改；而使用返回物件的函式，由於每次返回的都是一個新物件（Object的例項），引用地址不同，則不會出現這個問題。

vue中v-if和v-show有什麼區別？

v-if和v-show看起來似乎差不多，當條件不成立時，其所對應的標籤元素都不可見，但是這兩個選項是有區別的:

1、v-if在條件切換時，會對標籤進行適當的建立和銷燬，而v-show則僅在初始化時載入一次，因此v-if的開銷相對來說會比v-show大。

2、v-if是惰性的，只有當條件為真時才會真正渲染標籤；如果初始條件不為真，則v-if不會去渲染標籤。v-show則無論初始條件是否成立，都會渲染標籤，它僅僅做的只是簡單的CSS切換。

computed和watch的區別

計算屬性computed：

• 支援快取，只有依賴資料發生改變，才會重新進行計算
• 不支援非同步，當computed內有非同步操作時無效，無法監聽資料的變化
• computed 屬性值會預設走快取，計算屬性是基於它們的響應式依賴進行快取的，也就是基於data中宣告過或者父元件傳遞的props中的資料通過計算得到的值
• 如果一個屬性是由其他屬性計算而來的，這個屬性依賴其他屬性，是一個多對一或者一對一，一般用computed
• 如果computed屬性屬性值是函式，那麼預設會走get方法；函式的返回值就是屬性的屬性值；在computed中的，屬性都有一個get和一個set方法，當資料變化時，呼叫set方法。

偵聽屬性watch：

• 不支援快取，資料變，直接會觸發相應的操作；
• watch支援非同步；
• 監聽的函式接收兩個引數，第一個引數是最新的值；第二個引數是輸入之前的值；
• 當一個屬性發生變化時，需要執行對應的操作；一對多；
• 監聽資料必須是data中宣告過或者父元件傳遞過來的props中的資料，當資料變化時，觸發其他操作，函式有兩個引數：

immediate：元件載入立即觸發回撥函式執行

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth裡聲明瞭firstName這個方法之後立即執行handler方法
    immediate: true
  }
}
複製程式碼

deep: deep的意思就是深入觀察，監聽器會一層層的往下遍歷，給物件的所有屬性都加上這個監聽器，但是這樣效能開銷就會非常大了，任何修改obj裡面任何一個屬性都會觸發這個監聽器裡的 handler

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}
複製程式碼

優化：我們可以使用字串的形式監聽

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}
複製程式碼

這樣Vue.js才會一層一層解析下去，直到遇到屬性a，然後才給a設定監聽函式。

vue-loader是什麼？使用它的用途有哪些？

vue檔案的一個載入器，跟template/js/style轉換成js模組。

$nextTick是什麼？

vue實現響應式並不是資料發生變化後dom立即變化，而是按照一定的策略來進行dom更新。

nextTick 是在下次 DOM 更新迴圈結束之後執行延遲迴調，在修改資料之後使用nextTick，則可以在回撥中獲取更新後的 DOM

v-for key的作用

當Vue用 v-for 正在更新已渲染過的元素列表是，它預設用“就地複用”策略。如果資料項的順序被改變，Vue將不是移動DOM元素來匹配資料項的改變，而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。

為了給Vue一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。key屬性的型別只能為 string或者number型別。

key 的特殊屬性主要用在Vue的虛擬DOM演算法，在新舊nodes對比時辨識VNodes。如果不使用 key，Vue會使用一種最大限度減少動態元素並且儘可能的嘗試修復/再利用相同型別元素的演算法。使用key，它會基於key的變化重新排列元素順序，並且會移除 key 不存在的元素。

Vue的雙向資料繫結原理是什麼？

vue.js 是採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥。主要分為以下幾個步驟：

1、需要observe的資料物件進行遞迴遍歷，包括子屬性物件的屬性，都加上setter和getter這樣的話，給這個物件的某個值賦值，就會觸發setter，那麼就能監聽到了資料變化

2、compile解析模板指令，將模板中的變數替換成資料，然後初始化渲染頁面檢視，並將每個指令對應的節點繫結更新函式，新增監聽資料的訂閱者，一旦資料有變動，收到通知，更新檢視

3、Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要做的事情是: ①在自身例項化時往屬性訂閱器(dep)裡面新增自己 ②自身必須有一個update()方法 ③待屬性變動dep.notice()通知時，能呼叫自身的update()方法，並觸發Compile中繫結的回撥，則功成身退。

4、MVVM作為資料繫結的入口，整合Observer、Compile和Watcher三者，通過Observer來監聽自己的model資料變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到資料變化 -> 檢視更新；檢視互動變化(input) -> 資料model變更的雙向繫結效果。

元件傳值

父傳子

通過props傳遞

父元件： <child value = '傳遞的資料' />

子元件: props['value'],接收資料,接受之後使用和data中定義資料使用方式一樣
複製程式碼

子傳父

在父元件中給子元件繫結一個自定義的事件，子元件通過$emit()觸發該事件並傳值。

父元件： <child @receive = 'receive' />

 子元件: this.$emit('receive','傳遞的資料')
複製程式碼

兄弟元件傳值

• 通過中央通訊 let bus = new Vue()

A：methods :{ 函式{bus.$emit(‘自定義事件名’，資料)} 傳送

B：created （）{bus.$on(‘A傳送過來的自定義事件名’，函式)} 進行資料接收

• 通過vuex

prop 驗證，和預設值

我們在父元件給子元件傳值的時候，可以指定該props的預設值及型別，當傳遞資料型別不正確的時候，vue會發出警告

props: {
    visible: {
        default: true,
        type: Boolean,
        required: true
    },
},
複製程式碼

請說下封裝 vue 元件的過程

首先，元件可以提升整個專案的開發效率。能夠把頁面抽象成多個相對獨立的模組，解決了我們傳統專案開發：效率低、難維護、複用性等問題。

然後，使用Vue.extend方法建立一個元件，然後使用Vue.component方法註冊元件。子元件需要資料，可以在props中接受定義。而子元件修改好資料後，想把資料傳遞給父元件。可以採用emit方法。

Vue.js的template編譯

簡而言之，就是先轉化成AST樹，再得到的render函式返回VNode（Vue的虛擬DOM節點），詳細步驟如下：

首先，通過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 原始碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以建立編譯器的。另外compile還負責合併option。

然後，AST會經過generate（將AST語法樹轉化成render funtion字串的過程）得到render函式，render的返回值是VNode，VNode是Vue的虛擬DOM節點，裡面有（標籤名、子節點、文字等等）

scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？

css的預編譯,使用步驟如下：

第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）

第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss

第三步：還是在同一個檔案，配置一個module屬性

第四步：然後在元件的style標籤加上lang屬性 ，例如：lang=”scss”

特性主要有:

• 可以用變數，例如（$變數名稱=值）
• 可以用混合器，例如（）
• 可以巢狀

vue如何監聽物件或者陣列某個屬性的變化

當在專案中直接設定陣列的某一項的值，或者直接設定物件的某個屬性值，這個時候，你會發現頁面並沒有更新。這是因為Object.defineprototype()限制，監聽不到變化。

解決方式：

• this.$set(你要改變的陣列/物件，你要改變的位置/key，你要改成什麼value)

this.$set(this.arr, 0, "OBKoro1"); // 改變陣列
this.$set(this.obj, "c", "OBKoro1"); // 改變物件
複製程式碼

• 陣列原生方法觸發檢視更新,vue可以監聽到陣列原生方法導致的資料資料變化

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()
複製程式碼

意思是使用這些方法不用我們再進行額外的操作，檢視自動進行更新。 推薦使用splice方法會比較好自定義,因為splice可以在陣列的任何位置進行刪除/新增操作

常用的事件修飾符

• .stop:阻止冒泡
• .prevent:阻止預設行為
• .self:僅繫結元素自身觸發
• .once: 2.1.4 新增,只觸發一次
• passive: 2.3.0 新增,滾動事件的預設行為 (即滾動行為) 將會立即觸發,不能和.prevent 一起使用
• .sync 修飾符

從 2.3.0 起vue重新引入了.sync修飾符，但是這次它只是作為一個編譯時的語法糖存在。它會被擴充套件為一個自動更新父元件屬性的 v-on 監聽器。示例程式碼如下：

<comp :foo.sync="bar"></comp>
複製程式碼

會被擴充套件為：

<comp :foo="bar" @update:foo="val => bar = val"></comp>
複製程式碼

當子元件需要更新 foo 的值時，它需要顯式地觸發一個更新事件：

this.$emit('update:foo', newValue)
複製程式碼

vue如何獲取dom

先給標籤設定一個ref值，再通過this.$refs.domName獲取，例如：

<div ref="test"></div>

const dom = this.$refs.test
複製程式碼

v-on可以監聽多個方法嗎？

是可以的，來個例子：

<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">
複製程式碼

assets和static的區別

這兩個都是用來存放專案中所使用的靜態資原始檔。

兩者的區別：

assets中的檔案在執行npm run build的時候會打包，簡單來說就是會被壓縮體積，程式碼格式化之類的。打包之後也會放到static中。

static中的檔案則不會被打包。

建議：將圖片等未處理的檔案放在assets中，打包減少體積。而對於第三方引入的一些資原始檔如iconfont.css等可以放在static中，因為這些檔案已經經過處理了。

slot插槽

很多時候，我們封裝了一個子元件之後，在父元件使用的時候，想新增一些dom元素，這個時候就可以使用slot插槽了，但是這些dom是否顯示以及在哪裡顯示，則是看子元件中slot元件的位置了。

vue初始化頁面閃動問題

使用vue開發時，在vue初始化之前，由於div是不歸vue管的，所以我們寫的程式碼在還沒有解析的情況下會容易出現花屏現象，看到類似於{{message}}的字樣，雖然一般情況下這個時間很短暫，但是我們還是有必要讓解決這個問題的。

首先：在css里加上以下程式碼

[v-cloak] {
    display: none;
}
複製程式碼

如果沒有徹底解決問題，則在根元素加上style="display: none;" :style="{display: 'block'}"

vue外掛篇

狀態管理（vuex）

vuex是什麼

Vuex 是一個專為 Vue.js應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也整合到 Vue 的官方除錯工具 devtools extension，提供了諸如零配置的 time-travel 除錯、狀態快照匯入匯出等高階除錯功能。

怎麼使用vuex

第一步安裝

npm install vuex -S
複製程式碼

第二步建立store

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//不是在生產環境debug為true
const debug = process.env.NODE_ENV !== 'production';
//建立Vuex例項物件
const store = new Vuex.Store({
    strict:debug,//在不是生產環境下都開啟嚴格模式
    state:{
    },
    getters:{
    },
    mutations:{
    },
    actions:{
    }
})
export default store;
複製程式碼

第三步注入vuex

import Vue from 'vue';
import App from './App.vue';
import store from './store';
const vm = new Vue({
    store:store,
    render: h => h(App)
}).$mount('#app')
複製程式碼

vuex中有幾個核心屬性，分別是什麼？

一共有5個核心屬性，分別是:

• state 唯一資料來源,Vue 例項中的 data 遵循相同的規則
• getters 可以認為是 store 的計算屬性,就像計算屬性一樣，getter 的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。Getter 會暴露為 store.getters 物件，你可以以屬性的形式訪問這些值.

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
複製程式碼

• mutation 更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation,非常類似於事件,通過store.commit 方法觸發

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變更狀態
      state.count++
    }
  }
})

store.commit('increment')
複製程式碼

• action Action 類似於 mutation，不同在於Action 提交的是 mutation，而不是直接變更狀態，Action 可以包含任意非同步操作

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})
複製程式碼

• module 由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的物件。當應用變得非常複雜時，store 物件就有可能變得相當臃腫。為了解決以上問題，Vuex 允許我們將 store 分割成模組（module）。

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態
複製程式碼

ajax請求程式碼應該寫在元件的methods中還是vuex的actions中

如果請求來的資料是不是要被其他元件公用，僅僅在請求的元件內使用，就不需要放入vuex 的state裡。

如果被其他地方複用，這個很大機率上是需要的，如果需要，請將請求放入action裡，方便複用。

從vuex中獲取的資料能直接更改嗎？

從vuex中取的資料，不能直接更改，需要淺拷貝物件之後更改，否則報錯；

vuex中的資料在頁面重新整理後資料消失

用sessionstorage 或者 localstorage 儲存資料

儲存： sessionStorage.setItem( '名', JSON.stringify(值) )
使用： sessionStorage.getItem('名') ---得到的值為字串型別，用JSON.parse()去引號；
複製程式碼

也可以引入外掛vuex-persist，使用方法如下：

• 安裝

npm install --save vuex-persist
or
yarn add vuex-persist
複製程式碼

• 引入

import VuexPersistence from 'vuex-persist'
複製程式碼

• 先建立一個物件並進行配置

const vuexLocal = new VuexPersistence({
    storage: window.localStorage
})
複製程式碼

• 引入進vuex外掛

const store = new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
}) 
複製程式碼

通過以上設定，在圖3中各個頁面之間跳轉，如果重新整理某個檢視，資料並不會丟失，依然存在，並且不需要在每個 mutations 中手動存取 storage 。

Vuex的嚴格模式是什麼,有什麼作用,怎麼開啟？

在嚴格模式下，無論何時發生了狀態變更且不是由mutation函式引起的，將會丟擲錯誤。這能保證所有的狀態變更都能被除錯工具跟蹤到。

在Vuex.Store 構造器選項中開啟,如下

const store = new Vuex.Store({
    strict:true,
})
複製程式碼

怎麼在元件中批量使用Vuex的getter屬性

使用mapGetters輔助函式, 利用物件展開運算子將getter混入computed 物件中

import {mapGetters} from 'vuex'
export default{
    computed:{
        ...mapGetters(['total','discountTotal'])
    }
}
複製程式碼

元件中重複使用mutation

使用mapMutations輔助函式,在元件中這麼使用

import { mapMutations } from 'vuex'
methods:{
    ...mapMutations({
        setNumber:'SET_NUMBER',
    })
}
複製程式碼

然後呼叫this.setNumber(10)相當呼叫this.$store.commit('SET_NUMBER',10)

mutation和action有什麼區別

• action 提交的是 mutation，而不是直接變更狀態。mutation可以直接變更狀態
• action 可以包含任意非同步操作。mutation只能是同步操作
• 提交方式不同

action 是用this.store.dispatch('ACTION_NAME',data)來提交。
mutation是用this.$store.commit('SET_NUMBER',10)來提交
複製程式碼

• 接收引數不同，mutation第一個引數是state，而action第一個引數是context，其包含了

{
    state,      // 等同於 `store.state`，若在模組中則為區域性狀態
    rootState,  // 等同於 `store.state`，只存在於模組中
    commit,     // 等同於 `store.commit`
    dispatch,   // 等同於 `store.dispatch`
    getters,    // 等同於 `store.getters`
    rootGetters // 等同於 `store.getters`，只存在於模組中
}

複製程式碼

在v-model上怎麼用Vuex中state的值？

需要通過computed計算屬性來轉換。

<input v-model="message">
// ...
computed: {
    message: {
        get () {
            return this.$store.state.message
        },
        set (value) {
            this.$store.commit('updateMessage', value)
        }
    }
}

複製程式碼

路由頁面管理（vue-router）

什麼是vue-router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。包含的功能有：

• 巢狀的路由/視圖表
• 模組化的、基於元件的路由配置
• 路由引數、查詢、萬用字元
• 基於 Vue.js 過渡系統的檢視過渡效果
• 細粒度的導航控制
• 帶有自動啟用的 CSS class 的連結
• HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行為

怎麼使用vue-router

第一步安裝

npm install vue-router -S

複製程式碼

第二步在main.js中使用Vue Router元件

第三步配置路由

• 定義 (路由) 元件

路由元件可以是直接定義，也可以是匯入已經定義好的元件。這裡匯入已經定義好的元件。如下

• 定義路由（路由物件陣列）

定義路由物件陣列。物件的path是自定義的路徑（即使用這個路徑可以找到對應的元件），component是指該路由對應的元件。如下：

• 例項化Vue Router物件

呼叫Vue Router的構造方法建立一個Vue Router的例項物件，將上一步定義的路由物件陣列作為引數物件的值傳入。如下

• 掛載根例項

第四步在App.vue中使用路由

在App.vue中使用標籤來顯示路由對應的元件，使用標籤指定當點選時顯示的對應的元件，to屬性就是指定元件對應的路由。如下：

怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態引數？

在router目錄下的index.js檔案中，對path屬性加上/:id。使用router物件的params.id獲取動態引數

vue-router的導航鉤子

常用的是router.beforeEach(to,from,next)，在跳轉前進行許可權判斷。一共有三種：

• 全域性導航鉤子：router.beforeEach(to,from,next)
• 元件內的鉤子
• 單獨路由獨享元件

vue路由傳參

使用query方法傳入的引數使用this.$route.query接受

使用params方式傳入的引數使用this.$route.params接受

router和route的區別

route為當前router跳轉物件裡面可以獲取name、path、query、params等

router為VueRouter例項，想要導航到不同URL，則使用router.push方法

路由 TypeError: Cannot read property 'matched' of undefined 的錯誤問題

找到入口檔案main.js裡的new Vue()，必須使用router名，不能把router改成Router或者其他的別名

// 引入路由
import router from './routers/router.js'

new Vue({
    el: '#app',
    router,    // 這個名字必須使用router
    render: h => h(App)
});

複製程式碼

路由按需載入

隨著專案功能模組的增加，引入的檔案數量劇增。如果不做任何處理，那麼首屏載入會相當的緩慢，這個時候，路由按需載入就閃亮登場了。

webpack< 2.4 時
{ 
    path:'/', 
    name:'home',
    components:resolve=>require(['@/components/home'],resolve)
} 
webpack> 2.4 時
{ 
    path:'/', 
    name:'home', 
    components:()=>import('@/components/home')
}

複製程式碼

import()方法是由es6提出的，動態載入返回一個Promise物件，then方法的引數是載入到的模組。類似於Node.js的require方法，主要import()方法是非同步載入的。

Vue裡面router-link在電腦上有用，在安卓上沒反應怎麼解決

Vue路由在Android機上有問題，babel問題，安裝babel polypill外掛解決

Vue2中註冊在router-link上事件無效解決方法

使用@click.native。原因：router-link會阻止click事件，.native指直接監聽一個原生事件

RouterLink在IE和Firefox中不起作用（路由不跳轉）的問題

• 只用a標籤，不使用button標籤
• 使用button標籤和Router.navigate方法

網路請求(axios)

這個模組請看我的另一篇文章，此處不再整理（我太懶了）

學會了axios封裝，世界都是你的

視訊播放(video.js)

這個模組請看我的另一篇文章，此處不再整理（我太懶了）

手把手從零開始---封裝一個vue視訊播放器元件

vue常用ui庫

移動端

• mint-ui （http://mint-ui.github.io/#!/zh-cn）
• Vant（https://youzan.github.io/vant/#/zh-CN/home）
• VUX (https://vux.li/)

pc端

• element-ui（https://element.eleme.cn/2.13/#/zh-CN/component/installation）
• Ant Design of Vue（https://www.antdv.com/docs/vue/introduce-cn/）
• Avue (https://avuejs.com/)

常用webpack配置

vue-lic3腳手架（vue.config.js）

publicPath

型別：String

預設：'/'

部署應用包時的基本 URL。預設情況下，Vue CLI會假設你的應用是被部署在一個域名的根路徑上，例如https://www.my-app.com/。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在https://www.my-app.com/my-app/，則設定publicPath為/my-app/

這個值也可以被設定為空字串 ('') 或是相對路徑 ('./')，這樣所有的資源都會被連結為相對路徑，這樣打出來的包可以被部署在任意路徑，也可以用在類似 Cordova hybrid 應用的檔案系統中。

productionSourceMap

型別：boolean

moren：true

不允許打包時生成專案來源對映檔案，在生產環境下可以顯著的減少包的體積

注 Source map的作用：針對打包後的程式碼進行的處理，就是一個資訊檔案，裡面儲存著位置資訊。也就是說，轉換後的程式碼的每一個位置，所對應的轉換前的位置。有了它，出錯的時候，除錯工具將直接顯示原始程式碼，而不是轉換後的程式碼。這無疑給開發者帶來了很大方便

assetsDir

放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄,預設是'',

indexPath

指定生成的 index.html 的輸出路徑(相對於outputDir)。也可以是一個絕對路徑。預設是'index.html'

lintOnSave

是否在每次儲存時使用eslint檢查，這個對語法的要求比較嚴格，對自己有要求的同學可以使用

css

css: {
    //是否啟用css分離外掛，預設是true，如果不啟用css樣式分離外掛，打包出來的css是通過內聯樣式的方式注入至dom中的，
    extract: true,
    sourceMap: false,//效果同上
    modules: false,// 為所有的 CSS 及其預處理檔案開啟 CSS Modules。
    // 這個選項不會影響 `*.vue` 檔案。
  },

複製程式碼

devServer

本地開發伺服器配置，此處直接貼上我常用的配置，以註釋的方式介紹

devServer: { 
    //配置開發伺服器
    host: "0.0.0.0",
    //是否啟用熱載入，就是每次更新程式碼，是否需要重新重新整理瀏覽器才能看到新程式碼效果
    hot: true,
    //服務啟動埠
    port: "8080",
    //是否自動開啟瀏覽器預設為false
    open: false,
    //配置http代理
    proxy: { 
      "/api": { //如果ajax請求的地址是http://192.168.0.118:9999/api1那麼你就可以在jajx中使用/api/api1路徑,其請求路徑會解析
        // http://192.168.0.118:9999/api1，當然你在瀏覽器上開到的還是http://localhost:8080/api/api1;
        target: "http://192.168.0.118:9999",
        //是否允許跨域，這裡是在開發環境會起作用，但在生產環境下，還是由後臺去處理，所以不必太在意
        changeOrigin: true,
        pathRewrite: {
            //把多餘的路徑置為''
          "api": ""
        }
      },
      "/api2": {//可以配置多個代理，匹配上那個就使用哪種解析方式
        target: "http://api2",
        // ...
      }
    }
},

複製程式碼

pluginOptions

這是一個不進行任何 schema 驗證的物件，因此它可以用來傳遞任何第三方外掛選項，例如：

{
    //定義一個全域性的less檔案，把公共樣式變數放入其中，這樣每次使用的時候就不用重新引用了
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        './src/assets/public.less'
      ]
    }
}

複製程式碼

chainWebpack

是一個函式，會接收一個基於 webpack-chain 的 ChainableConfig 例項。允許對內部的 webpack 配置進行更細粒度的修改。例如：

chainWebpack(config) { 
//新增一個路徑別名 假設有在assets/img/menu/目錄下有十張圖片，如果全路徑require("/assets/img/menu/img1.png")
//去引入在不同的層級下實在是太不方便了，這時候向下方一樣定義一個路勁別名就很實用了
    config.resolve.alias
      //新增多個別名支援鏈式呼叫
      .set("assets", path.join(__dirname, "/src/assets"))
      .set("img", path.join(__dirname, "/src/assets/img/menu"))
      //引入圖片時只需require("img/img1.png");即可
}

作者：monkeysoft
連結：https://juejin.im/post/5f0dab7df265da22cc286e70
來源：掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。