前端項目之vue分環境打包

前端項目部署的環境每每是多環境的,最熟悉的例如:測試環境,生產環境。不一樣的環境下每每api接口的域名地址是不一樣的,那麼就會存在一個問題,不一樣環境下項目打包部署前都須要咱們去手動更改域名地址,豈不是很麻煩,甚至會出現忘記更改或者關係搞反的狀況,那怎麼辦呢?莫慌,今天就來嘮嘮vue分環境打包這些事。

vue-cli 2.x 分環境打包

• vue-cli 2.x版本分環境打包步驟能夠猛戳這裏.一位同事寫的一篇關於vue-cli 2.x多環境下打包的文章,絕對是乾貨中的戰鬥機,因此就儘可能再也不重複造輪子,今天咱們仍是以vue-cli 3.0版本下的分環境打包方式爲主。

vue-cli 3.0 分環境打包

• 首先仍是老規矩,能用代碼說明的問題,毫不多bb一句,so,咱們就開始,直接上代碼吧。
  1.package.json添加命令

"scripts": {
    "dev": "vue-cli-service serve", //本地運行，會把process.env.NODE_ENV的值設置爲'development'(默認)
    "build:dev": "vue-cli-service build --mode dev",//dev模式下打包(測試服打包)，會把process.env.NODE_ENV的值設置爲'.env.dev文件中NODE_ENV聲明的值'
    "build": "vue-cli-service build"//正式服打包，會把process.env.NODE_ENV的值設置爲'production'(默認)
  },

複製代碼

注意:
       1.命令"build:dev"是能夠自定義的,不是固定寫法,例如你能夠徹底聲明成"build-dev"等任何其餘字段.
       2.--mode '名稱' 必須與如下步驟2中的.env.'名稱' 的'模式名稱'字段保持一致,這裏是必須滴.

       2. 在項目根目錄添加文件.env.'名稱' 文件,我這裏就是.env.dev文件

• 如下爲.env.dev文件中定義的環境變量(分環境打包依賴於該自定義的環境變量來實現)

       3.多環境下的應用(以不一樣生產環境下的api接口域名地址舉例)

<!--request.js-->
let env = process.env.NODE_ENV === 'development' ? 'development': process.env.VUE_APP_TITLE;
const baseURL = (env === 'development' || env === 'build_dev') ? store.state.testURL : store.state.baseURL;
複製代碼

       4.打包

npm run build:dev 測試服打包(package.json 中定義)
npm run build 正式服打包
複製代碼

• 不一樣打包命令下會加載其對應模式下的環境變量,這樣咱們就經過改變process.env.NODE_ENV和process.env.VUE_APP_TITLE 區分打包環境,來實現分環境下項目打包.

notes

• 有幾個值得關注的地方,在這裏說明一哈
  1.vue-cli 3.0 多環境下打包主要得益於其對項目根目錄下.env文件的支持,這部分能夠戳這裏查看官方文檔,很詳細,非常乾貨.

2. 步驟2.env文件中NODE_ENV環境變量的值能夠是'development','production','test',在這裏我將其定義爲'production'是由於開webpack打包時針對process.env.NODE_ENV===''production''和其餘狀況打出來的包結構和大小都不同,這個有興趣的小夥伴能夠分別打包嘗試下,就會一目瞭然.

至此vue-cli 3.0中項目分環境打包方式就基本完畢,如下是小弟思考的關於小程序實現相似於分環境動態切換接口域名的方案,能夠討論討論,嘿嘿.

---------------------------------一條華麗的分割線---------------------------------

小程序分環境動態切換域名

• 小程序中__wxConfig.envVersion能夠用來區分小程序體驗版，開發板，正式版. envVersion 類型爲字符串

  envVersion: 'develop', //開發版

  envVersion: 'trial', //體驗版

  envVersion: 'release', //正式版

  這樣咱們就能夠變通的來實現小程序中動態切換域名,避免手動註釋切換的方式.

  END

  不積跬步，無以致千里；不積小流，無以成江海。