Vue.js 如何根据生产或开发模式读取不同的 .env 文件

NODE_ENV=production webpack

console.log(process.env)

VUE_APP_ROOT=http://localhost:8000/
VUE_APP_BASE_URL=http://localhost:8000/api/

VUE_APP_ROOT=http://realaddress/
VUE_APP_BASE_URL=http://realaddress/api/

console.log("environment variables")
console.log(process.env.VUE_APP_ROOT)
console.log(process.env.VUE_APP_BASE_URL)

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

// webpack.config.js
const Dotenv = require('dotenv-webpack');
const env = process.env.NODE_ENV;

module.exports = {
  ...
  plugins: [
    new Dotenv({
      path: `./.env.${env === "production" ? "prd" : "dev"}`,
    })
  ]
  ...
};

Vue.js相关问答推荐

在 VueJS 中，将变量而不是组件的字符串名称传递给动态组件的 ：is 属性不起作用

在 dom 内移动 Vue 组件？

在重复内容区域中添加

VuetifyJS，outer-link 未显示为光标

在 vuejs 中显示两个组件，但只显示一个，为什么？

在 vue 3 中使用 vue-chartjs：createElement 不是函数

Vuejs中的条件a href

根据 URL 有条件地隐藏视图组件

如何像 React 中的 {...props} 一样在 Vue 中解构 props？

VueJS + Typescript：类型上不存在属性

在渲染组件之前从 api 获取数据

POST 文件连同表单数据 Vue + axios

如何将 mapActions 与 vue + Typescript 类组件一起使用？

Vue：从 Vue 实例更新组件数据

我可以使用 vue.js v-if 来判断值是否存在于数组中

如何将 v-if 与 Vue.js 中的值进行比较

Vue更改宽度和内容

如何在 Vue.js 中获取组件元素的 offsetHeight？

vue 在 v-model 之后执行 @click

根据nuxt中的url参数动态加载组件