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

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

今後之後，只須要執行不一樣的打包命令就能夠自動設置BASE_URL和NODE_ENV了，告別頻繁的註釋和取消註釋，瀟灑的刪除你的if...else...設置baseUrl的文件吧