在 Vue.js 中使用环境变量

Vue.js 和 Webpack

如果将 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

如下面的评论所述: 如果使用 Vue cli 3，则只加载以 VUE _ APP _开头的变量。

如果 发球当前正在运行，不要忘记重新启动它。

Vue.js 和 Vite

Vite 公开特殊 import.meta.env对象上以 VITE_开头的 env 变量。

你的. env 应该是这样的:

VITE_API_ENDPOINT=value
VITE_API_KEY=value

可以在 Vue.js 组件或 import.meta.env.VITE_API_ENDPOINT和 import.meta.env.VITE_API_KEY下的 JavaScript 文件中访问这些变量。

提示: 记住，只要在。运行中的 env 文件。

有关详细信息，请参阅 Env 变量的 Vite 文档。

如果使用 VUE cli 3，则只加载以 VUE _ APP _ 开头的变量。

在根目录中创建一个. env 文件:

VUE_APP_ENV_VARIABLE=value

如果它正在运行，则需要重新启动 发球，以便加载新的 env 变量。

这样，您就能够在您的项目(. js 和. vue 文件)中使用 process.env.VUE _ APP _ ENV _ VARIABLE。

更新

根据@ali6p，使用 Vue Cli 3，不需要安装 dotenv 依赖项。

在 vue-cli 版本3:

对于. env 文件有三个选项: 你可使用 .env或:

• .env.test
• .env.development
• .env.production

可以通过使用前缀 regex 作为 /^/而不是 /node_modules/@vue/cli-service/lib/util/resolveClientEnv.js:prefixRE中的 /^VUE_APP_/来使用自定义 .env变量

对于以不同模式(如测试、开发和生成 .env文件)开发开源应用程序，当然不推荐这样做。因为每次 npm install ..都会被覆盖。

我遇到的一个问题是，VueJS 的 我正在使用 webpack-简单安装似乎没有包含一个环境变量配置文件夹。因此，我无法编辑 env.test、 development 和 production.js 配置文件。创造它们也于事无补。

其他的答案对我来说不够详细，所以我只是“摆弄”了一下 webpack.config.js。

因此，要使 Environment Variables 工作，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'"
}
})
]);
}

我还应该注意到，由于某些原因，你似乎需要“”双引号。

那么，发展，我现在可以访问这些环境变量:

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'"
}
})
]);


}

在项目的根目录中创建环境文件:

• 。 env
• . env.some 环境1
• 有些环境2

为了加载这些配置，需要通过 mode指定环境。

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

环境1:

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>

现在，如果你运行的应用程序没有一个 mode，它会显示“这将得到...”，但如果你指定一个 someEnvironment1作为你的 mode，那么你将从那里得到标题。

您可以通过将 .local附加到您的文件: .env.someEnvironment1.local来创建对 git“隐藏”的配置-这对于您有秘密时非常有用。

阅读 那些文件了解更多信息。

1. 在根文件夹(package.json 附近) .env和 .env.production中创建两个文件
2. 向这些前缀为 VUE_APP_的文件添加变量，例如: VUE_APP_WHATEVERYOUWANT
3. Server 使用 .env，而 建造使用 .env.production
4. 在您的组件(vue 或 js)中，使用 process.env.VUE_APP_WHATEVERYOUWANT调用 value
5. 如果 发球当前正在运行，不要忘记重新启动它
6. 清除浏览器缓存

确保您正在使用 vue-cli 版本3或更高版本

更多信息: https://cli.vuejs.org/guide/mode-and-env.html

对于那些使用 Vue CLI 3和 webpack-simple 安装的人来说，Aaron 的回答确实对我有用，但是我并不热衷于将我的环境变量添加到我的 webpack.config.js中，因为我想把它提交给 GitHub。相反，我安装了 Dotenv-webpack插件，这看起来像是从项目根目录的 .env文件加载环境变量，而不需要在 VUE_APP_之前加载环境变量。

除了前面的答案，如果你想在你的 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 文件中，这对于变量来说是很好的。在这个阶段，您还可以导入 Mixin，使它们可用于每个 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.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)
}
})
]
}
};

重要(在 V4中，可能也在 V3 + 中!): 我设置了 VUE _ APP _ VAR，但是无法通过控制台日志记录进程和打开 env 对象看到它。我可以通过记录或引用 process.env.VUE _ APP _ VAR 来查看它。我不知道这是为什么，但是请注意，您必须直接访问变量！

使用不同的 .env文件运行多个生成

在我的应用程序中，我希望有多个生产版本，一个用于 Web 应用程序，另一个用于浏览器扩展。

根据我的经验，更改 建造模式可能会产生副作用，因为构建过程的其他部分可能依赖于 production，例如，所以这里有另一种提供自定义 env 文件(基于@GrayedFox 的回答)的方法:

包裹 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中的空字符串。

注三: 如果不设置 ABC0，那么 ABC1中的环境变量将优先于 .env.custom。

注4: 如果您希望使用 vue-cli、 --skip-plugins选项非常有用构建多个不同的版本。

我在 vuecli@5也有同样的问题。试图通过阅读官方文件来解决，但无法得到正确的解决方案。经过很长一段时间，我得到了解决方案，它工程罚款。

1. 在 root dir. 触摸上创建. env 文件
2. 设置它的值，即 APP _ NAME = name
3. Js 文件通过它 VUE _ APP _ VERION = need (’./package.json’) . version
4. 记录到任意方法 Log (process.env.APP _ NAME) ;

安装这个

npm install -g @vue/cli

你的项目 对我有效