webpack 3 + Vue2 使用dotenv配置多環(huán)境的步驟

更新時間：2023年11月30日 11:54:31 作者：煮酒泛舟

這篇文章主要介紹了webpack 3 + Vue2 使用dotenv配置多環(huán)境,env文件在配置文件都可以用, vue頁面用的時候需要在 webpack.base.conf.js 重新配置,需要的朋友可以參考下

前言

webpack 3 + Vue2 使用dotenv方式配置多環(huán)境

一、dotenv

它能將環(huán)境變量中的變量從 .env 文件加載到 process.env 中

二、使用步驟

1.引入庫

yarn add dotenv --dev

2.添加.env文件

這里會添加.env .env.dev .env.dev.local .env.production
一般情況.env.dev.local 是不會提交到git的
會按照這個順序覆蓋環(huán)境變量的值 .env.*.local > .env.* > .env

# port
VUE_PORT = 3200
# 應(yīng)用接口上下文
VUE_APP_CONTEXT_NEW = /CONT
# API請求前綴 
VUE_APP_API_PREFIX = /apis
VUE_PUBILIC_PATH = site
# 當(dāng)運行 vue-cli-service build 時生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄。
VUE_OUTPUT_DIR = site
#  放置生成的靜態(tài)資源 (js、css、img、fonts) 的目錄(相對于outputDir目錄)。
VUE_ASSETSDIR = static
# 指定生成的 
VUE_INDEX_PATH = index.html
VUE_PROXY = {"/apis": "http://192.168.1.10:8089"}

3.修改代理配置

修改config/indes.js，這個文件要根據(jù)自己的配置去找。

const dotenv = require("dotenv");
const fs = require("node:fs");
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
const pathsDotenv = resolveApp(".env");
dotenv.config({ path: `${pathsDotenv}.${process.env.NODE_ENV}.local` });
dotenv.config({ path: `${pathsDotenv}.${process.env.NODE_ENV}` });
dotenv.config({ path: pathsDotenv });
console.log("【process.env.VUE_PORT】", process.env.VUE_PORT);
console.log("【process.env.VUE_PROXY】", process.env.VUE_PROXY);
const createProxy = obj => {
  const ret = {};
  const httpsRE = /^https:\/\//;
  if (obj) {
    obj = JSON.parse(obj);
    for (const prefix in obj) {
      const target = obj[prefix];
      const isHttps = httpsRE.test(target);
      ret[prefix] = {
        target: target,
        changeOrigin: true,
        ws: true,
        pathRewrite: path => path.replace(new RegExp(`^${prefix}`), ""),
        ...(isHttps ? { secure: false } : {})
      };
    }
  }
  console.debug(ret);
  return ret;
};
....
// 這個地方可以使用函數(shù)方式，都一樣，改proxyTable就可以了。
module.exports = {
  dev: {
  	....
 	proxyTable: createProxy(process.env.VUE_PROXY)
 	....
 }
}
....

4.vue文件中如何使用環(huán)境變量

修改 webpack.base.conf.js
需要哪些變量就配置

new webpack.DefinePlugin({
  "process.env": {
    NODE_ENV: JSON.stringify(process.env.NODE_ENV || "development"),
    VUE_APP_CONTEXT: JSON.stringify(
      process.env.VUE_APP_CONTEXT || "/CONTEXT"
    ),
    VUE_APP_API_PREFIX: JSON.stringify(
      process.env.VUE_APP_API_PREFIX || "/contextapi"
    )
  }
}),