.env[mode]文件中如何添加註釋

2022 年 9 月 22 日
筆記
VUE, 前端

前言

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請自行探索，感謝觀看😉

我是 甜點cc

熱愛前端，也喜歡專研各種跟本職工作關係不大的技術，技術、產品興趣廣泛且濃厚，等待著一個創業機會。主要致力於分享實用技術乾貨，希望可以給一小部分人一些微小幫助。

我排斥「新人迷茫，老人看戲」的現象，希望能和大家一起努力破局。營造一個良好的技術氛圍，為了個人、為了中國的數字化轉型、互聯網物聯網技術、數字經濟發展做一點點貢獻。數風流人物還看中國、看今朝、看你我。

Tags: VUE 前端