我一直在阅读官方文档，但在环境变量中找不到任何内容。显然有一些支持环境变量的社区项目，但这对我来说可能有点矫枉过正。所以我想知道在处理已经使用 Vue CLI 创建的项目时，是否有一些简单的开箱即用的东西可以在本地工作。
例如，我可以看到，如果我执行以下操作，打印出正确的环境意味着这已经设置了吗？
mounted() {
console.log(process.env.ROOT_API)
}
我对 env 变量和 Node.js 有点陌生。
仅供参考，使用 Vue CLI 3.0 beta。
如果您将 vue cli 与 Webpack 模板（默认配置）一起使用，您可以创建环境变量并将其添加到 .env 文件中。
process.env.variableName这些变量将在您的项目中自动访问。加载的变量也可用于所有 vue-cli-service 命令、插件和依赖项。
您有几个选项，这是来自环境变量和模式文档：
.env # loaded in all cases
.env.local # loaded in all cases, ignored by git
.env.[mode] # only loaded in specified mode
.env.[mode].local # only loaded in specified mode, ignored by git
您的 .env 文件应如下所示：
VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value
据我了解，您需要做的就是创建 .env 文件并添加变量，然后您就可以开始了！:)
如下评论所述： 如果您使用的是 Vue cli 3，则只会加载以VUE_APP_开头的变量。
如果它当前正在运行，请不要忘记重新启动服务。
如果您使用的是 Vue cli 3，则只会加载以 VUE_APP_ 开头的变量。
在根目录中创建一个 .env 文件，其中包含：
VUE_APP_ENV_VARIABLE=value
而且，如果它正在运行，您需要重新启动服务，以便可以加载新的环境变量。
有了这个，您将能够在您的项目（.js 和 .vue 文件）中使用 process.env.VUE_APP_ENV_VARIABLE。
根据@ali6p，使用 Vue Cli 3，不需要安装 dotenv 依赖项。
.env和.env.production VUE_APP_例如： VUE_APP_WHATEVERYOUWANT.env和建造用途.env.production process.env.VUE_APP_WHATEVERYOUWANT调用值确保您使用的是 vue-cli 版本 3 或更高版本
在项目的根目录中创建环境文件：
然后加载这些配置，您可以通过modeie指定环境
npm run serve --mode development //default mode
npm run serve --mode someEnvironment1
在您的env文件中，您只需将配置声明为键值对，但如果您使用的是 vue 3，则必须使用以下前缀VUE_APP_：
在您的.env 中：
VUE_APP_TITLE=This will get overwritten if more specific available
.env.someEnvironment1：
VUE_APP_TITLE=My App (someEnvironment1)
然后，您可以通过以下方式在任何组件中使用它：
我的组件.vue：
<template>
<div>
{{title}}
</div>
</template>
<script>
export default {
name: "MyComponent",
data() {
return {
title: process.env.VUE_APP_TITLE
};
}
};
</script>
现在，如果您在没有 a 的情况下运行该应用程序mode，它将显示“这将获得...”，但如果您将 a 指定someEnvironment1为您的，mode那么您将从那里获得标题。
.local您可以通过附加到您的文件来创建从 git 中“隐藏”的配置： .env.someEnvironment1.local- 当您有秘密时非常有用。
阅读文档以获取更多信息。
我遇到的一个问题是我正在使用 VueJS 的 webpack-simple 安装，它似乎不包含环境变量配置文件夹。所以我无法编辑 env.test、development 和 production.js 配置文件。创建它们也无济于事。
其他答案对我来说不够详细，所以我只是“摆弄”了 webpack.config.js。以下工作得很好。
所以要让环境变量工作，webpack.config.js 的底部应该有以下内容：
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
基于上述，在生产中，您将能够获得 NODE_ENV 变量
mounted() {
console.log(process.env.NODE_ENV)
}
现在可能有更好的方法来做到这一点，但如果你想在开发中使用环境变量，你可以这样做：
if (process.env.NODE_ENV === 'development') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
}
})
]);
}
现在，如果您想添加其他变量，那么简单如下：
if (process.env.NODE_ENV === 'development') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
ENDPOINT: '"http://localhost:3000"',
FOO: "'BAR'"
}
})
]);
}
我还应该注意，出于某种原因，您似乎需要“''”双引号。
因此，在 Development 中，我现在可以访问这些环境变量：
mounted() {
console.log(process.env.ENDPOINT)
console.log(process.env.FOO)
}
这是整个 webpack.config.js 只是为了一些上下文：
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
if (process.env.NODE_ENV === 'development') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
ENDPOINT: '"http://localhost:3000"',
FOO: "'BAR'"
}
})
]);
}
这就是我编辑我的方式vue.config.js，以便我可以暴露NODE_ENV给前端（我正在使用 Vue-CLI）：
vue.config.js
const webpack = require('webpack');
// options: https://github.com/vuejs/vue-cli/blob/dev/docs/config.md
module.exports = {
// default baseUrl of '/' won't resolve properly when app js is being served from non-root location
baseUrl: './',
outputDir: 'dist',
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
// allow access to process.env from within the vue app
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
]
}
};
在 vue-cli 版本 3 中：
.env 文件有三个选项：您可以使用.env或：
.env.test.env.development.env.production您可以.env通过使用前缀正则表达式 as/^/而不是/^VUE_APP_/in来使用自定义变量/node_modules/@vue/cli-service/lib/util/resolveClientEnv.js:prefixRE
这当然不推荐在测试、开发和文件生产等不同模式下开发开源应用程序.env。因为每次你npm install ..，它都会被覆盖。
重要（在 Vue 4 和可能的 Vue 3+ 中！）：我设置了 VUE_APP_VAR 但无法通过控制台日志记录过程和打开 env 对象看到它。我可以通过记录或引用 process.env.VUE_APP_VAR 来查看它。我不确定为什么会这样，但请注意您必须直接访问该变量！
除了前面的答案之外，如果您希望访问 sass 中的 VUE_APP_* env 变量（vue 组件的 sass 部分或 scss 文件），那么您可以将以下内容添加到您的 vue.config.js （如果您没有，您可能需要创建）：
let sav = "";
for (let e in process.env) {
if (/VUE_APP_/i.test(e)) {
sav += `$${e}: "${process.env[e]}";`;
}
}
module.exports = {
css: {
loaderOptions: {
sass: {
data: sav,
},
},
},
}
字符串 sav 似乎被添加到处理之前的每个 sass 文件中，这对于变量来说很好。您还可以在此阶段导入 mixins，以使它们可用于每个 vue 组件的 sass 部分。
然后，您可以在 vue 文件的 sass 部分中使用这些变量：
<style lang="scss">
.MyDiv {
margin: 1em 0 0 0;
background-image: url($VUE_APP_CDN+"/MyImg.png");
}
</style>
或在 .scss 文件中：
.MyDiv {
margin: 1em 0 0 0;
background-image: url($VUE_APP_CDN+"/MyImg.png");
}
来自https://www.matt-helps.com/post/expose-env-variables-vue-cli-sass/
对于那些使用 Vue CLI 3 和 webpack-simple 安装的人来说，Aaron 的回答确实对我有用，但是我并不热衷于将环境变量添加到我的环境变量中，webpack.config.js因为我想将它提交到 GitHub。相反，我安装了dotenv-webpack插件，这似乎可以从.env项目根目录的文件中很好地加载环境变量，而无需预先VUE_APP_添加到环境变量中。
.env使用不同的文件运行多个构建在我的应用程序中，我希望有多个生产版本，一个用于 Web 应用程序，另一个用于浏览器扩展。
以我的经验，更改构建模式可能会产生副作用，因为构建过程的其他部分可以依赖于production例如，因此这是提供自定义 env 文件的另一种方法（基于@GrayedFox 的答案）：
{
"scripts": {
"build": "vue-cli-service build",
"build:custom": "VUE_CLI_SERVICE_CONFIG_PATH=$PWD/vue.config.custom.js vue-cli-service build",
}
}
// 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 从默认的 config 中换出配置vue.config.js，因此其中设置的任何设置都不适用于custom构建。
注意2 ：这将.env.production在..env.custom.env.productioncustom.env.custom
注意 3：如果您未设置override: true，则环境变量 in.env.production将优先于.env.custom.
注意 4：如果您希望使用 进行多个不同的构建vue-cli，该--skip-plugins选项非常有用。