再項(xiàng)目更目錄下新建vue.config.js文件贯涎，如下：
微信圖片_20190616165423.png
module.exports = {
devServer: {
open: true, // 自動打開瀏覽器
hot: true, // 實(shí)時打包編譯
host: '0.0.0.0',
inline: true, // 表示實(shí)時刷新瀏覽器
port: '8020' // 指定打開瀏覽器的端口號
}
}
既可以改變本地啟動端口
vue.config.js其他配置
module.exports = {
// type :string defalut :"/"
// 把開發(fā)服務(wù)器架設(shè)在根路徑
publicPath: process.env.NODE_ENV === 'produvtion'
? '/production-sub-path/'
: '/',
// type :string defalut :"dist"
// 打包后的文件夾名字
outputDir: 'dist',
// type :string defalut :""
// 靜態(tài)資源目錄
assetsDir: 'assets',
// type :string defalut :"index.html"
// 指定生成的 index.html 的輸出路徑 (相對于 outputDir)介时。也可以是一個絕對路徑敲霍。
indexPath: 'index.html',
// type :boolean defalut :"true"
// 生成的靜態(tài)資源在它們的文件名中包含了 hash 以便更好的控制緩存,如果是vue cli創(chuàng)建的index.html客情，則為true，無法使用 Vue CLI 生成的 index HTML绽慈，為false
filenameHashing: true,
// type :object defalut :"undefined"
// 設(shè)置單頁面與多頁面
// 多頁面情況下呐能，每個“page”應(yīng)該有一個對應(yīng)的 JavaScript 入口文件隶糕。其值應(yīng)該是一個對象，對象的 key 是入口的名字府框，value 是：
// 一個指定了 entry, template, filename, title 和 chunks 的對象 (除了 entry 之外都是可選的)吱窝；
// 或一個指定其 entry 的字符串。
// 具體情況看官網(wǎng) https://cli.vuejs.org/zh/config/#pages
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板來源
template: 'public/index.html',
// 在 dist/index.html 的輸出
filename: 'index.html',
// 當(dāng)使用 title 選項(xiàng)時迫靖，
// template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在這個頁面中包含的塊院峡，默認(rèn)情況下會包含
// 提取出來的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
},
// type :boolean| error defalut :"true"
// 是否在開發(fā)環(huán)境下通過 eslint-loader 在每次保存時 lint 代碼
// true: eslint-loader 會將 lint 錯誤輸出為編譯警告系宜。默認(rèn)情況下照激，警告僅僅會被輸出到命令行，且不會使得編譯失敗,在開發(fā)和生產(chǎn)環(huán)境都會起作用
// 想要在生產(chǎn)構(gòu)建時禁用 eslint-loader ==> lintOnSave: process.env.NODE_ENV !== 'production'
// false：無反應(yīng)
// error：這會強(qiáng)制 eslint-loader 將 lint 錯誤輸出為編譯錯誤盹牧，同時也意味著 lint 錯誤將會導(dǎo)致編譯失敗俩垃。
// 通過設(shè)置讓瀏覽器 overlay 同時顯示警告和錯誤 在 devServe 配置項(xiàng)中 ==> overlay: {warnings: true,errors: true}
lintOnSave: true,
// type :boolean defalut :"false"
// 是否使用包含運(yùn)行時編譯器的 Vue 構(gòu)建版本。設(shè)置為 true 后你就可以在 Vue 組件中使用 template 選項(xiàng)了汰寓，但是這會讓你的應(yīng)用額外增加 10kb 左右口柳。
// 具體信息看官網(wǎng) https://cn.vuejs.org/v2/guide/installation.html#運(yùn)行時+編譯器vs.只包含運(yùn)行時
runtimeCompiler: false,
// type :Array<string | RegExp> defalut :"[]" (RegExp) ==> 正則
// 默認(rèn)情況下 babel-loader 會忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式轉(zhuǎn)譯一個依賴有滑，可以在這個選項(xiàng)中列出來
transpileDependencies: [],
// type :boolean defalut :"true"
// SourceMap 一個存儲源代碼與編譯代碼對應(yīng)位置映射的信息文件
// 如果你不需要生產(chǎn)環(huán)境的 source map跃闹，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建
productionSourceMap: true,
// type :String defalut : undefined
// 設(shè)置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標(biāo)簽的 crossorigin 屬性。需要注意的是該選項(xiàng)僅影響由 html-webpack-plugin 在構(gòu)建時注入的標(biāo)簽 - 直接寫在模版 (public/index.html) 中的標(biāo)簽不受影響。
// 這個應(yīng)該和標(biāo)簽跨域有關(guān) 具體細(xì)節(jié)看 ==> https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes
// crossorigin: '',
// type :boolean defalut :"false"
// 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標(biāo)簽上啟用 Subresource Integrity (SRI)望艺。如果你構(gòu)建后的文件是部署在 CDN 上的苛秕，啟用該選項(xiàng)可以提供額外的安全性。
// 需要注意的是該選項(xiàng)僅影響由 html-webpack-plugin 在構(gòu)建時注入的標(biāo)簽 - 直接寫在模版 (public/index.html) 中的標(biāo)簽不受影響找默。
// 另外艇劫，當(dāng)啟用 SRI 時，preload resource hints 會被禁用惩激，因?yàn)?Chrome 的一個 bug 會導(dǎo)致文件被下載兩次
// SRI(子資源完整性) https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
integrity: false,
// type: object | function
// 調(diào)整 webpack 配置
// 如果這個值是一個對象店煞，則會通過 webpack-merge 合并到最終的配置中。
// 如果這個值是一個函數(shù)咧欣，則會接收被解析的配置作為參數(shù)浅缸。該函數(shù)及可以修改配置并不返回任何東西，也可以返回一個被克隆或合并過的配置版本魄咕。
// 細(xì)節(jié)查看 https://cli.vuejs.org/zh/guide/webpack.html#簡單的配置方式
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 為生產(chǎn)環(huán)境修改配置...
} else {
// 為開發(fā)環(huán)境修改配置...
}
},
// type:function
// 是一個函數(shù)衩椒，會接收一個基于 webpack-chain 的 ChainableConfig 實(shí)例。允許對內(nèi)部的 webpack 配置進(jìn)行更細(xì)粒度的修改哮兰。
// 具體細(xì)節(jié)查看 https://cli.vuejs.org/zh/guide/webpack.html#鏈?zhǔn)讲僮?高級)
// 你需要熟悉 webpack-chain 的 API 并閱讀一些源碼以便了解如何最大程度利用好這個選項(xiàng)毛萌，但是比起直接修改 webpack 配置，它的表達(dá)能力更強(qiáng)喝滞，也更為安全阁将。
// chainWebpack ==> 我有點(diǎn)理解不了，應(yīng)該是修改 添加 替換loader
css: {
// type :boolean defalut :"false"
// 默認(rèn)情況下右遭，只有 *.module.[ext] 結(jié)尾的文件才會被視作 CSS Modules 模塊做盅。設(shè)置為 true 后你就可以去掉文件名中的 .module 并將所有的 *.(css|scss|sass|less|styl(us)?) 文件視為 CSS Modules 模塊。
// 細(xì)節(jié)查看https://cli.vuejs.org/zh/guide/css.html#css-modules
modules: false,
// type:boolean | object defalut:生產(chǎn)環(huán)境下是 true窘哈，開發(fā)環(huán)境下是 false
// 是否將組件中的 CSS 提取至一個獨(dú)立的 CSS 文件中 (而不是動態(tài)注入到 JavaScript 中的 inline 代碼)吹榴。
// 當(dāng)作為一個庫構(gòu)建時，你也可以將其設(shè)置為 false 免得用戶自己導(dǎo)入 CSS
// 提取 CSS 在開發(fā)環(huán)境模式下是默認(rèn)不開啟的滚婉，因?yàn)樗?CSS 熱重載不兼容图筹。然而，你仍然可以將這個值顯性地設(shè)置為 true 在所有情況下都強(qiáng)制提取让腹。
// extract
// type:boolean defalut :"false"
// 是否為 CSS 開啟 source map远剩。設(shè)置為 true 之后可能會影響構(gòu)建的性能。
sourceMap: false,
// type:object defalut:{}
// 向 CSS 相關(guān)的 loader 傳遞選項(xiàng)骇窍。css預(yù)設(shè)器配置項(xiàng)
// loader 可以通過 loaderOptions 配置瓜晤，包括：css-loader postcss-loader sass-loader less-loader stylus-loader
// 具體細(xì)節(jié)查看 https://cli.vuejs.org/zh/guide/css.html#向預(yù)處理器Loader傳遞選項(xiàng)
loaderOptions: {
css: {
// 這里的選項(xiàng)會傳遞給 css-loader
},
postcss: {
// 這里的選項(xiàng)會傳遞給 postcss-loader
}
}
},
// type:boolean defalut:require('os').cpus().length > 1
// 是否為 Babel 或 TypeScript 使用 thread-loader。該選項(xiàng)在系統(tǒng)的 CPU 有多于一個內(nèi)核時自動啟用腹纳，僅作用于生產(chǎn)構(gòu)建
// 構(gòu)建時開啟多進(jìn)程處理babel編譯
parallel: require('os').cpus().length > 1,
// type: object
// 單頁插件相關(guān)配置 向PWA插件傳遞選項(xiàng)
// 具體細(xì)節(jié) https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// type:object
// 這是一個不進(jìn)行任何 schema 驗(yàn)證的對象痢掠，因此它可以用來傳遞任何第三方插件選項(xiàng)哈恰。
// schema數(shù)據(jù)庫對象的集合 (也有其他意思。志群。。)
pluginOptions: {},
// type:object
// 開發(fā)配置
// 細(xì)節(jié)查看 https://webpack.js.org/configuration/dev-server/#devserver
devServer: { // webpack-dev-server的配置項(xiàng)
open: true, // 自動打開瀏覽器
hot: true, // 實(shí)時打包編譯
inline: true, // 表示實(shí)時刷新瀏覽器
port: '8020' // 指定打開瀏覽器的端口號
}
}
