[Vue.js] 開發用和正式環境的參數設定方式(.env)

在開發階段時，通常會用指令 npm run dev 讓專案運作，當內容有任何修正時，就能快速的生效。完成開發後要放到正式環境時，再執行 npm run build 來產生最終的檔案，放到網頁伺服器上使用。

一般在開發階段時的後端API和正式環境用的API可能是不同的，因此可以利用.env來進行設定。

安裝vue-cli可以快速建置專案(安裝方式)，在目錄config/裡有兩個檔案 dev.env.js、prod.env.js，顧名思義一個是在dev用的、一個是在production用的。

1. dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ROOT_API: '"http://localhost/api"'
})

2. prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ROOT_API: '"https://example.com/api"'
}

在dev時會用 http://localhost/api，在production時會使用https://example.com/api。


在VUE專案裡要使用這個參數：

process.env.API_LOCATION

不需要任何import就可以使用，例如：

mounted() {
  console.log(process.env.ROOT_API)
}

最後需要注意，如果已經在執行npm run dev，在dev.env.js修改可能不會被偵測到，請按ctrl+c離開這個指令再執行一次。


資料來源：
https://alligator.io/vuejs/working-with-environment-variables/