.env[mode]檔案中如何新增註釋

前言

Vue-Cli 允許我們在專案根目錄建立.env.[mode]檔案來設定一些打包編譯的啟動引數，通過執行指令碼的時候加mode引數，指定不同環境需要載入的組態檔

形如： .env.prod

NODE_ENV='production'
VUE_APP_PATH='./'
VUE_APP_RUNTIME='prod'

問題

怎麼在 .env.prod 檔案中新增註釋呢？

分析

這要看vue是怎麼解析 .env.prod 檔案的

通過啟動指令碼引數 --mode prod，一路找到了處理 .env.prod 檔案的邏輯，讓我們一塊看下

path：node_modules\@vue\cli-service\lib\Service.js

const dotenv = require('dotenv');

// ...

loadEnv (mode) {
    const logger = debug('vue:env')
    const basePath = path.resolve(this.context, `.env${mode ? `.${mode}` : ``}`)
    const localPath = `${basePath}.local`

    const load = envPath => {
      try {
        const env = dotenv.config({ path: envPath, debug: process.env.DEBUG })
        dotenvExpand(env)
        logger(envPath, env)
      } catch (err) {
        // only ignore error if file is not found
        if (err.toString().indexOf('ENOENT') < 0) {
          error(err)
        }
      }
    }

    load(localPath)
    load(basePath)

    // by default, NODE_ENV and BABEL_ENV are set to "development" unless mode
    // is production or test. However the value in .env files will take higher
    // priority.
    if (mode) {
      // always set NODE_ENV during tests
      // as that is necessary for tests to not be affected by each other
      const shouldForceDefaultEnv = (
        process.env.VUE_CLI_TEST &&
        !process.env.VUE_CLI_TEST_TESTING_ENV
      )
      const defaultNodeEnv = (mode === 'production' || mode === 'test')
        ? mode
        : 'development'
      if (shouldForceDefaultEnv || process.env.NODE_ENV == null) {
        process.env.NODE_ENV = defaultNodeEnv
      }
      if (shouldForceDefaultEnv || process.env.BABEL_ENV == null) {
        process.env.BABEL_ENV = defaultNodeEnv
      }
    }
  }

從上面的程式碼，可以得知，vue使用dotenv解析 .env.prod 檔案，並將環境變數從 .env[mode] 檔案中載入到 process.env 環境變數中

解決（dotenv）

dotenv外掛已經被 Vue-Cli 整合了

GitHub地址

README.md 中有這麼一段話：

「# marks the beginning of a comment (unless when the value is wrapped in quotes)」

這就是我們要找的，在.env.[mode] 檔案中，可以使用 # 進行註釋

使用測試

path: .env.prod 引數設定

NODE_ENV='production'
# VUE_APP_PATH='/pc/'
VUE_APP_PATH='./'
VUE_APP_RUNTIME='prod'

package.json 檔案指令碼命令設定--mode引數

"scripts": {
    "build": "vue-cli-service build --mode prod",
  },

執行 npm run build 命令，輸出如下：

NODE_ENV=== production
VUE_APP_PATH=== ./

本文到此為止，要想了解更多dotenv請自行探索，感謝觀看