vue-cli3配置文件

一谒府、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的loaderplugins

//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ù)......

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末薄霜,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子纸兔,更是在濱河造成了極大的恐慌惰瓜,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件汉矿,死亡現(xiàn)場(chǎng)離奇詭異崎坊,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)洲拇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門奈揍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人赋续,你說我怎么就攤上這事男翰。” “怎么了纽乱?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵奏篙,是天一觀的道長。 經(jīng)常有香客問我迫淹,道長秘通,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任敛熬,我火速辦了婚禮肺稀,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘应民。我一直安慰自己话原,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布诲锹。 她就那樣靜靜地躺著繁仁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪归园。 梳的紋絲不亂的頭發(fā)上黄虱,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音庸诱,去河邊找鬼捻浦。 笑死晤揣,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的朱灿。 我是一名探鬼主播昧识,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼盗扒!你這毒婦竟也來了跪楞?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤侣灶,失蹤者是張志新(化名)和其女友劉穎甸祭,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體炫隶,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年阎曹,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了伪阶。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡处嫌,死狀恐怖栅贴,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情熏迹,我是刑警寧澤檐薯,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站注暗,受9級(jí)特大地震影響坛缕,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜捆昏,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一赚楚、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧骗卜,春花似錦宠页、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至遍烦,卻和暖如春俭嘁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背服猪。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國打工兄淫, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留屯远,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓捕虽,卻偏偏與公主長得像慨丐,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子泄私,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容