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

时间:2018-06-02 10:13:51

标签: webpack vue.js vue-cli

我正在使用Vue和webpack,其中包含一个环境变量,告诉webpack为生产或开发构建。

这是有效的:

NODE_ENV=production webpack

console.log(process.env)

但是,this documentation explains您可以根据生产或开发模式使用不同的.env文件来更改应用中的变量。

.env 档案

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

.env.prod 档案

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

但是我不清楚如何访问这些.env文件?显然,当您使用vue-cli时,这会有效,但在我的应用中,这会记录未定义:

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

如何根据生产模式访问不同的.env文件,而不是vue-cli

1 个答案:

答案 0 :(得分:1)

您可以使用dotenv插件。

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

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

要根据环境加载文件,您可以使用process.env.NODE_ENV

// 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"}`,
    })
  ]
  ...
};

你可以在here

看到vue-cli做类似的事情