vue-cli3配置文件

一、vue.config.js文件配置

在項(xiàng)目根目錄下自己手動新建vue.config.js文件，會被@vue/cli-service自動加載。
參考的官方文檔

1、配合webpack的配置

簡單配置
調(diào)整webpack配置最簡單的方式就是在vue.config.js中的configureWebpack選項(xiàng)提供一個對象。該對象將會被webpack-merge合并如最終的webpack配置。
在configureWebpack里可以配置webpack的loader和plugins等

//vue.config.js
module.exports = {
  //1.簡單配置
  configureWebpack : {
    plugins: [
      new MyAwesomeWebpackPlugin(),
    ]
  }

  //2.鏈?zhǔn)讲僮鳎涸试S對內(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)會傳遞給 css-loader
    },
    postcss : {
     //這里的選項(xiàng)會傳遞給 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開始已棄用，請使用publicPath
  baseUrl : '/',

  /*
    2.1部署應(yīng)用包時的基本URL。用法和webpack本身的output.publicPath一致。
但在cli的其它地方也會用到這個值，所以請不要直接修改webpack的output.publicPath。
    2.2默認(rèn)情況下,Vue Cli會假設(shè)你的應(yīng)用是被部署在一個域名的根路徑。
如我本地的應(yīng)用的路徑是“D:\WORK\study\vue\vue_cli3_test\demo1”，則在這個應(yīng)用中，根路徑就是“D:\WORK\study\vue\vue_cli3_test\demo1”
  */
  publicPath : '/',

  //3.當(dāng)運(yùn)行vue-cli-service build時生成的生產(chǎn)環(huán)境構(gòu)建環(huán)境的目錄。用法和webpack的output.path一樣，不要修改output.path
  outputDir :'dist',

  //4.放置打包后生成的靜態(tài)資源（js、css、img、fonts）的目錄，該目錄相對于outputDir。
  assetsDir:' ',

  //5.指定生成的index.html的輸出路徑，相對于outputDir。也可以是一個絕對路徑。
  indexPath : 'index.html',

  //6.
  filenameHashing : true,

  //7.多頁應(yīng)用模式下構(gòu)建應(yīng)用
  pages : undefined,

  //8.安裝@vue/cli-plugin-eslint后生效。為true時將檢查錯誤輸出為編譯警告輸出到命令行，編譯不會失敗。
  //為"error"時，將檢查錯誤直接顯示在瀏覽器中。強(qiáng)制eslint-loader將lint錯誤輸出為編譯錯誤，編譯會失敗。
  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)證的對象，可以用來傳遞任何第三方插件選項(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)境變量和模式？

一個項(xiàng)目前端開發(fā)過程中，一般會經(jīng)歷本地開發(fā)，測試腳本， 開發(fā)自測 ，測試環(huán)境 ，預(yù)上線環(huán)境 才能正式發(fā)布。對應(yīng)每個環(huán)境都可能有所差異，如 服務(wù)器地址，后臺接口地址等。所以在環(huán)境切換時，就需要不同的配置參數(shù)，這時候就可以使用環(huán)境變量和模式，來方便我們管理。

2.vue-cli3總共提供了四中方式來指定環(huán)境變量：

1.在根目錄添加.env文件，配置所有情況下都會用到的配置（不知道這個存在的意義，所有的都需要的也就不需要配置了吧）。
2.在根目錄添加.env.local文件，配置所有情況下都會用到的配置，與.env的區(qū)別是只會在本地，該文件不會被git跟蹤。
3.在根目錄添加.env.[mode]文件，配置對應(yīng)某個模式下的配置,比如：.env.development來配置開發(fā)環(huán)境的配置。
4.在根目錄添加.env.[mode].local文件，配置對應(yīng)某個模式下的配置,與.env.[mode]的區(qū)別也只是會在本地生效，該文件不會被git跟蹤。

3.模式

在運(yùn)行命令時為NODE_ENV賦值，去設(shè)置此時運(yùn)行的應(yīng)用的環(huán)境模式。每個模式都會將NODE_ENV的值設(shè)置為模式的名稱——比如在 development 模式下 NODE_ENV 的值會被設(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參時默認(rèn)是開發(fā)環(huán)境
    "build": "vue-cli-service build",  // vue-cli-service build --mode production，不帶mode參時默認(rèn)是生產(chǎn)環(huán)境
    "lint": "vue-cli-service lint",
   
    //自己新建一個模式：需要在項(xiàng)目根目錄新建.env.stage1文件，在.env.stage1文件里聲明變量
    //會在 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)先級
為一個特定模式準(zhǔn)備的環(huán)境文件將會比一般的環(huán)境文件擁有更改的優(yōu)先級。
同一個key: .env.[mode].local > .env.[mode] > .env

4.環(huán)境變量

在.env文件中，只有以VUE_APP_開頭的變量會被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模式，會加載可能存在的.env,.env.development,.env.development.local文件。
輸出com_development_local
2.使用命令：npm run build
該命令默認(rèn)production模式，會加載可能存在的.env,.env.production,.env.production.local文件。
輸出com_production
3..使用命令：npm run stage1
該命令默認(rèn)production模式，會加載可能存在的.env,.env.stage1,.env.stage1.local文件。
輸出common

未完待續(xù)......

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容