.env在mode文件中如何添加註釋詳解

Posted on by

前言

Vue-Cli 允許我們在項目根目錄創建.env.[mode]文件來設置一些打包編譯的啟動參數，通過執行腳本的時候加mode參數，指定不同環境需要加載的配置文件

形如： .env.test

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

問題

怎麼在 .env.test 文件中添加註釋呢？

分析

這要看vue是怎麼解析 .env.test 文件的

通過啟動腳本，一路找到瞭處理 .env.test 文件的邏輯，讓我們一塊看下

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.test 文件，並將環境變量從 .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=== ./

以上就是.env在mode文件中如何添加註釋詳解的詳細內容，更多關於.env在mode文件添加註釋的資料請關註WalkonNet其它相關文章！

推薦閱讀：