Vue CLI - 環境變數&模式

今天用 Vue CLI 建置了一個 project，發現放置環境變數的 config 目錄不見了，也找不到 .env 之類的檔案。參考了官方文件，順便做一下筆記。

Modes and Environment Variables
https://cli.vuejs.org/guide/mode-and-env.html

Mode 模式

Vue CLI 有三種模式：development, test, production

舊版 package.json

# 這是之前舊版 Vue CLI 產生的 package.json
"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
},

舊版環境文件

# dev.env.js

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  APIPATH: '"https://vue-course-api.hexschool.io"',
  CUSTOMPATH: '"ur_will_kome"'
  // NODE_ENV: '"development"',
  // API_PATH: '"https://vue-course-api.hexschool.io"',
  // CUSTOM_PATH: '"ur_will_kome"'
})

現行版本的 package.json

"scripts": {
  "serve": "vue-cli-service serve", # 預設使用 development
  "build": "vue-cli-service build", # 在 build 時會使用 production 環境文件 (.env, .env.production, .env.production.local 等）
},

Vue CLI 有三種模式：development, test, production，不同模式下會使用不同的環境文件。

# Modes

development is used by vue-cli-service serve
test is used by vue-cli-service test:unit
production is used by vue-cli-service build and vue-cli-service test:e2e

環境變數

# Environment Variables

只要在根目錄下加入環境文件即可。命名方式如下：

# 環境文件
.env.env            # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

如果後方有加上 .local 則不會上傳到 git，在 local 端的環境文件都會被忽略。

## .gitignore

# local env files
.env.local
.env.*.local

NODE_ENV: '"development"',
API_PATH: '"https://www.example.com/api/"'

之前的寫法跟現在不太一樣。
目前環境文件使用 key=value 組成，斷行不需要用, 也不用 quotation (用單引號跟雙引號去包起來)

NODE_ENV=development
VUE_APP_TITLE=我是環境文件
VUE_API_PATH=https://www.abcdefg.com/api/

** 如果要在程式裡使用到環境變數，變數命名需要以 VUE_APP 開頭

使用環境變數

console.log(process.env.VUE_APP_TITLE) // => 我是環境文件