一谒府、vue.config.js文件配置
在項(xiàng)目根目錄下自己手動(dòng)新建
vue.config.js文件，會(huì)被@vue/cli-service自動(dòng)加載。
參考的官方文檔
1揭蜒、配合webpack的配置
簡(jiǎn)單配置
調(diào)整webpack配置最簡(jiǎn)單的方式就是在vue.config.js中的configureWebpack選項(xiàng)提供一個(gè)對(duì)象淘衙。該對(duì)象將會(huì)被webpack-merge合并如最終的webpack配置传藏。
在configureWebpack里可以配置webpack的loader和plugins等
//vue.config.js
module.exports = {
//1.簡(jiǎn)單配置
configureWebpack : {
plugins: [
new MyAwesomeWebpackPlugin(),
]
}
//2.鏈?zhǔn)讲僮鳎涸试S對(duì)內(nèi)部的webpack配置進(jìn)行更細(xì)粒度的修改
chainWebpack : config => {
}
//3.webpack的css的一些loader
css : {
module : false,
extract : false ,
sourceMap : false,
loaderOptions: { //向css相關(guān)的loader傳遞選項(xiàng)，
//支持的loader:css-loader,postcss-loader,sass-loader,less-loader,stylus-loader
css : {
//這里的選項(xiàng)會(huì)傳遞給 css-loader
},
postcss : {
//這里的選項(xiàng)會(huì)傳遞給 postcss-loader
}
},
}
//4.所有webpack的devServer的選項(xiàng)都支持
devServer : {
proxy : {
'/api' : {
target : 'http://localhost:4000',
ws : true,
changeOrigin : true,
}
}
}
}
2.完整配置文件
下方配置項(xiàng)的值都是默認(rèn)值
//vue.config.js
module.exports = {
//1.從vue cli3.3開始已棄用彤守，請(qǐng)使用publicPath
baseUrl : '/',
/*
2.1部署應(yīng)用包時(shí)的基本URL毯侦。用法和webpack本身的output.publicPath一致。
但在cli的其它地方也會(huì)用到這個(gè)值具垫，所以請(qǐng)不要直接修改webpack的output.publicPath侈离。
2.2默認(rèn)情況下,Vue Cli會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑。
如我本地的應(yīng)用的路徑是“D:\WORK\study\vue\vue_cli3_test\demo1”筝蚕，則在這個(gè)應(yīng)用中霍狰，根路徑就是“D:\WORK\study\vue\vue_cli3_test\demo1”
*/
publicPath : '/',
//3.當(dāng)運(yùn)行vue-cli-service build時(shí)生成的生產(chǎn)環(huán)境構(gòu)建環(huán)境的目錄。用法和webpack的output.path一樣饰及，不要修改output.path
outputDir :'dist',
//4.放置打包后生成的靜態(tài)資源（js蔗坯、css、img燎含、fonts）的目錄宾濒，該目錄相對(duì)于outputDir。
assetsDir:' ',
//5.指定生成的index.html的輸出路徑屏箍，相對(duì)于outputDir绘梦。也可以是一個(gè)絕對(duì)路徑。
indexPath : 'index.html',
//6.
filenameHashing : true,
//7.多頁應(yīng)用模式下構(gòu)建應(yīng)用
pages : undefined,
//8.安裝@vue/cli-plugin-eslint后生效赴魁。為true時(shí)將檢查錯(cuò)誤輸出為編譯警告輸出到命令行卸奉，編譯不會(huì)失敗。
//為"error"時(shí)颖御，將檢查錯(cuò)誤直接顯示在瀏覽器中榄棵。強(qiáng)制eslint-loader將lint錯(cuò)誤輸出為編譯錯(cuò)誤，編譯會(huì)失敗潘拱。
lintOnSave : true,
//9.
tuntimeCompiler : false,
//10.
transpileDependencies : [],
//11.如果你不需要生產(chǎn)環(huán)境的 source map疹鳄，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建
productionSourceMap : true,
//12.
crossorigin : undefined,
//13.
integrity : false,
//14.
parallel : require('os').cpus().length > 1 ,
//15.向PWA插件傳遞選項(xiàng)
pwa : {}
//16.不進(jìn)行任何schema驗(yàn)證的對(duì)象，可以用來傳遞任何第三方插件選項(xiàng)芦岂，不是webpack的plugins
pluginOptions : {},
//17.和wenpack相關(guān)的配置參考最上面代碼
}
1.eslint是用于檢查我們寫的javascript代碼是否滿足指定規(guī)則的
靜態(tài)代碼檢查工具瘪弓，是使用nodejs寫的。
2.webpack的Source Map 使用
二禽最、環(huán)境變量與模式
1.為什么需要自定義配置環(huán)境變量和模式腺怯？
一個(gè)項(xiàng)目前端開發(fā)過程中袱饭，一般會(huì)經(jīng)歷本地開發(fā)，測(cè)試腳本呛占， 開發(fā)自測(cè) 宁赤，測(cè)試環(huán)境 ，預(yù)上線環(huán)境 才能正式發(fā)布栓票。對(duì)應(yīng)每個(gè)環(huán)境都可能有所差異，如 服務(wù)器地址愕够，后臺(tái)接口地址等走贪。所以在環(huán)境切換時(shí)，就需要不同的配置參數(shù)惑芭，這時(shí)候就可以使用環(huán)境變量和模式坠狡，來方便我們管理。
2.vue-cli3總共提供了四中方式來指定環(huán)境變量：
1.在根目錄添加.env文件遂跟，配置所有情況下都會(huì)用到的配置（不知道這個(gè)存在的意義逃沿，所有的都需要的也就不需要配置了吧）。
2.在根目錄添加.env.local文件幻锁，配置所有情況下都會(huì)用到的配置凯亮，與.env的區(qū)別是只會(huì)在本地，該文件不會(huì)被git跟蹤哄尔。
3.在根目錄添加.env.[mode]文件假消，配置對(duì)應(yīng)某個(gè)模式下的配置,比如：.env.development來配置開發(fā)環(huán)境的配置。
4.在根目錄添加.env.[mode].local文件岭接，配置對(duì)應(yīng)某個(gè)模式下的配置,與.env.[mode]的區(qū)別也只是會(huì)在本地生效富拗，該文件不會(huì)被git跟蹤。
3.模式
在運(yùn)行命令時(shí)為
NODE_ENV賦值鸣戴，去設(shè)置此時(shí)運(yùn)行的應(yīng)用的環(huán)境模式啃沪。每個(gè)模式都會(huì)將NODE_ENV的值設(shè)置為模式的名稱——比如在 development 模式下 NODE_ENV 的值會(huì)被設(shè)置為 "development"
默認(rèn)情況下Vue Cli項(xiàng)目有三種模式，
- development：在vue-cli-service serve下窄锅，即開發(fā)環(huán)境使用
- production：在vue-cli-service build 和vue-cli-service test:e2e下创千，即正式環(huán)境使用
- test： 在vue-cli-service test:unit下使用
在package.json文件中：
{
"scripts": {
"serve": "vue-cli-service serve", // vue-cli-service serve --mode development，不帶mode參時(shí)默認(rèn)是開發(fā)環(huán)境
"build": "vue-cli-service build", // vue-cli-service build --mode production入偷，不帶mode參時(shí)默認(rèn)是生產(chǎn)環(huán)境
"lint": "vue-cli-service lint",
//自己新建一個(gè)模式：需要在項(xiàng)目根目錄新建.env.stage1文件签餐，在.env.stage1文件里聲明變量
//會(huì)在 stage1 模式下加載可能存在的 .env、.env.stage1 和 .env.stage1.local 文件然后構(gòu)建出生產(chǎn)環(huán)境應(yīng)用盯串。
"stage1" :"vue-cli-service serve --mode stage1"
},
}
環(huán)境加載優(yōu)先級(jí)
為一個(gè)特定模式準(zhǔn)備的環(huán)境文件將會(huì)比一般的環(huán)境文件擁有更改的優(yōu)先級(jí)氯檐。
同一個(gè)key:.env.[mode].local>.env.[mode]>.env
4.環(huán)境變量
在
.env文件中，只有以VUE_APP_開頭的變量會(huì)被webpack.DefinePlugin靜態(tài)嵌入到客戶端側(cè)的包中体捏。環(huán)境變量必須以VUE_APP_開頭冠摄。
//.env文件
VUE_APP_SECRET = secret
//js文件訪問
console.log(process.env.VUE_APP_SECRET)
5.示例
1.設(shè)置環(huán)境變量
.env文件：VUE_APP_NAME = commom
.env.development文件：VUE_APP_NAME = com_development
.env.production文件：VUE_APP_NAME = com_production
.env.development.local文件：VUE_APP_NAME = com_development_local
2.package.json文件
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"stage1" :"vue-cli-service serve --mode stage1"
},
}
3.在項(xiàng)目
main.js里輸出console.log(process.env.VUE_APP_NAME)
4.運(yùn)行應(yīng)用
1.使用命令：npm run serve
該命令默認(rèn)develpoment模式糯崎，會(huì)加載可能存在的.env,.env.development,.env.development.local文件。
輸出com_development_local
2.使用命令：npm run build
該命令默認(rèn)production模式河泳，會(huì)加載可能存在的.env,.env.production,.env.production.local文件沃呢。
輸出com_production
3..使用命令：npm run stage1
該命令默認(rèn)production模式，會(huì)加載可能存在的.env,.env.stage1,.env.stage1.local文件拆挥。
輸出common
未完待續(xù)......
