Nuxt項目中多環境下baseUrl的配置

實際項目中有本地，測試，灰度，生產等環境，總不能老是去改配置注釋吧，多累啊

於是就有了@nuxtjs/dotenv，可以幫助我們方便的管理我們的環境變量

安裝  npm i @nuxtjs/dotenv -s

新建一個文件名為 .env的文件，也可以叫其他名字（.env是默認讀取的文件名,可查看官方文檔獲取更多姿勢）

需要去nuxt.config.js中配置modules模塊

nuxt.config.js
...
module.exports = {
    modules: [
    ['@nuxtjs/dotenv'] //這里沒有做其他參數傳入，會默認讀取目錄下的.env文件，如果是叫prod.env,應該寫成['@nuxtjs/dotenv', { filename: '.env.prod' }]
  ],
}
...

具體的使用如下

.env文件
DEV_BASE_URL = 'http://xxx.cn'
TEST_BASE_URL = 'https://xxx.cn'
TEST2_BASE_URL = 'https://xxx.cn'
PROD_BASE_URL = 'https://xxx.cn'

在nuxt.config.js文件中

require('dotenv').config()

let baseUrl = ''

switch (process.env.BASE) {

  case 'dev':

    baseUrl = process.env.DEV_BASE_URL

    break;

  case 'test':

    baseUrl = process.env.TEST_BASE_URL

    break;

  case 'www2':

    baseUrl = process.env.TEST2_BASE_URL

    break;

  case 'production':

    baseUrl = process.env.PROD_BASE_URL

    break;

  default:

    baseUrl = process.env.PROD_BASE_URL

    break;

}

 

module.exports = {

 

  ...

  env: {

     baseUrl: baseUrl,

  }

}

這里的process.env.BASE是怎么來的呢，是在運行命令傳進來的，pagage.json里面進行配置即可

為什么不用NODE_ENV呢，因為nuxt這個參數會用在全局配置，不能隨便改，所以我們寫多一個參數

 "scripts": {
    "dev": "cross-env NODE_ENV=development BASE=dev nodemon server/index.js --watch server","build": "cross-env NODE_ENV=production BASE=production nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js","generate": "nuxt generate"
  }

 

現在process.env.baseUrl 可以在全局進行訪問，拼接api即可