我一直在阅读官方文档，但无法找到有关环境变量的任何信息。 显然有一些社区项目支持环境变量，但这可能对我来说太过复杂了。 因此，我想知道是否有一些简单的开箱即用的东西可以在使用Vue CLI创建的项目中本地工作。
例如，我可以看到如果我执行以下操作，则正确的环境将被打印出来，这意味着已经设置好了？
mounted() {
console.log(process.env.ROOT_API)
}
我对环境变量和Node还是有些陌生。
提醒一下，我正在使用Vue CLI 3.0 beta版本。
使用环境变量与Vue.js
205
- Edgar Quintero
5
14个回答
0
对于使用Vue CLI 3和webpack-simple安装的人，Aaron's answer 对我有效，但我不想将我的环境变量添加到webpack.config.js中，因为我想将其提交到GitHub。相反，我安装了dotenv-webpack插件，这似乎可以从项目根目录下的.env文件中加载环境变量，而无需在环境变量前面添加VUE_APP_。
- jamesbellnet
0
使用不同的.env文件运行多个构建
在我的应用中，我希望有多个生产构建，一个用于Web应用程序，另一个用于浏览器扩展。
根据我的经验，更改构建模式可能会产生副作用，因为构建过程的其他部分可能依赖于处于production状态，所以这里提供另一种提供自定义环境文件的方法（基于@GrayedFox的答案）：
package.json
{
"scripts": {
"build": "vue-cli-service build",
"build:custom": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/vue.config.custom.js vue-cli-service build",
}
}
vue.config.custom.js
// install `dotenv` with `yarn add -D dotenv`
const webpack = require("webpack");
require("dotenv").config({ override: true, path: "./.env.custom" });
module.exports = {
plugins: [new webpack.EnvironmentPlugin({ ...process.env })],
};
注意1：
VUE_CLI_SERVICE_CONFIG_PATH替换了默认的vue.config.js配置文件，因此在custom构建中设置的任何设置都不会应用。
注意2：这将在.env.custom之前加载.env.production，因此如果您不希望在custom构建中设置.env.production中的任何环境变量，则需要在.env.custom中将其设置为空字符串。
注意3：如果您没有设置override: true，则.env.production中的环境变量将优先于.env.custom。
注意4：如果您想使用vue-cli进行多个不同的构建，则--skip-plugins选项非常有用。
- fredrivett
0
我在vuecli@5中遇到了同样的问题。尝试通过阅读官方文档来解决，但是无法得到正确的解决方案。经过长时间的努力，我找到了解决方案，并且它运行良好。
- 在根目录上创建.env文件。touch .env
- 设置值，例如APP_NAME=name
- 将其粘贴到vue.config.js文件中process.env.VUE_APP_VERSION = require('./package.json').version
- 使用任何方法记录日志console.log(process.env.APP_NAME);
- Md Al-Mahmud
-1
只需安装这个
npm install -g @vue/cli
在你的项目中 我已经开始工作了
- Doaa
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
process.env可以用来获取环境变量。 - Julian Paolo Dayagvue create my-app创建了我的项目，但根据您发布的文档，env变量无法正常工作。@Phil - Edgar Quintero