一谒府、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ù)......