nuxt.js配置BASE_URL(基本域名)和NODE_ENV(環境變量)

一直以來,開發環境和生產環境的數據接口域名不一樣總是困擾着我

每次打測試包或者線上包,我都得手動切換域名,我相信很多人的做法跟這差不多,類似下面這樣:

nuxt.js配置BASE_URL(基本域名)和NODE_ENV(環境變量)

(你已經注意到,這個文件已經被我無情的刪除了,因爲我發現了屬於我自己的新大陸)

每次打包都要切換註釋,雖然也能接受,但是容易忘記或者出錯,或者找這個配置文件都要找半天,

對於我這種反應遲鈍、頭腦經常性短路的人來說實在太痛苦了,

有痛點,那就要尋求解決方法:

第一步:安裝 cross-env(這個迷你的包能夠提供一個設置環境變量的scripts)

npm i cross-env -D

第二步:配置BASE_URL和NODE_ENV
我們不是有個package.json嗎,裏面是不是有個scripts對象?

// package.json
{
  "scripts": {
    "dev": "cross-env BASE_URL=https://devpc.17wawawa.com NODE_ENV=development nuxt",
    "start": "cross-env BASE_URL=https://devpc.17wawawa.com NODE_ENV=production nuxt start",
    "build": "cross-env BASE_URL=https://www.17wawawa.com NODE_ENV=production nuxt build",
    "test": "cross-env BASE_URL=https://test.17wawawa.com NODE_ENV=production nuxt generate",
    "generate": "cross-env BASE_URL=https://www.17wawawa.com NODE_ENV=production nuxt generate"
  },
}

先寫cross-env,接着配置BASE_URL和NODE_ENV,

因爲cross-env能跨平臺地設置及使用環境變量,這樣我們在執行不同的命令(npm run xxx)時,都會設置相應的BASE_URL(基本域名)和NODE_ENV(環境變量)

一定要注意,命令一定要寫在末尾,比如我上面的nuxt、nuxt start、nuxt build等等,否則 npm run 時會報錯

執行不同的命令就會自動設置不同的BASE_URL和NODE_ENV

npm run dev  // BASE_URL=https://devpc.17wawawa.com NODE_ENV=development
npm run test  // BASE_URL=https://test.17wawawa.com NODE_ENV=production
npm run generate // BASE_URL=https://www.17wawawa.com NODE_ENV=production

千萬別直接複製我上面的這段代碼哦,因爲每個項目的BASE_URL一般都是不一樣的,你要換成自己項目的接口請求域名

第三步:配置nuxt.config.js

package.json中的scripts配置完成之後,還要去nuxt.config.js配置一下env,官方文檔

// nuxt.config.js
module.exports = {
  mode: 'universal',
  env: {
    BASE_URL: process.env.BASE_URL,
    NODE_ENV: process.env.NODE_ENV
  }
}

第四步:如何使用

使用是最簡單的,直接寫process.env.BASE_URL就可以了,比如在我們的axios配置文件裏使用process.env.BASE_URL

nuxt.js配置BASE_URL(基本域名)和NODE_ENV(環境變量)

或者你在任意頁面console.log(process.env.BASE_URL)都是可以打印得出來的

從此以後,只需要執行不同的打包命令就可以自動設置BASE_URL和NODE_ENV了,告別頻繁的註釋和取消註釋,瀟灑的刪除你的if...else...設置baseUrl的文件吧

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章