如何根据生产或开发模式读取不同的 .env 文件?
How to read different .env files depending on production or development mode?
我正在使用 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)
如何在没有 vue-cli
的情况下根据生产模式访问不同的 .env
文件?
您可以使用 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"}`,
})
]
...
};
你可以看到 vue-cli 在做类似的事情 repo
我正在使用 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)
如何在没有 vue-cli
的情况下根据生产模式访问不同的 .env
文件?
您可以使用 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"}`,
})
]
...
};
你可以看到 vue-cli 在做类似的事情 repo