在 Vue.js 中使用环境变量

Question

我一直在阅读官方文档，但找不到有关环境变量的任何信息。显然有一些支持环境变量的社区项目，但这对我来说可能有点过分了。所以我想知道在处理已经使用 Vue CLI 创建的项目时，是否有一些简单的开箱即用的东西可以在本机工作。

例如，我可以看到，如果我执行以下操作，正确的环境打印出来意味着这已经设置好了吗？

mounted() {
  console.log(process.env.ROOT_API)
}

我对环境变量和 Node 有点陌生。

仅供参考，使用 Vue CLI 版本 3.0 beta。

Answer 1

Vue.js 与 Webpack

如果您将 vue cli 与 Webpack 模板（默认配置）一起使用，您可以创建环境变量并将其添加到 .env 文件中。

变量将在您项目的 process.env.variableName 下自动访问。加载的变量也可用于所有 vue-cli-service 命令、插件和依赖项。

你有几个选择，这是来自 Environment Variables and Modes documentation:

.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_ 开头的变量。

不要忘记重新启动 serve 如果它当前是运行。

Vue.js 与 Vite

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

您的 .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 文件中更改或添加变量时重新启动开发服务器

有关详细信息，请参阅 Vite documentation for env variables。

Answer 2

如果您使用的是 Vue cli 3，则只会加载以 VUE_APP_ 开头的变量。

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

VUE_APP_ENV_VARIABLE=value

而且，如果是运行，您需要重新启动 serve 以便可以加载新的环境变量。

有了这个，您将能够在您的项目（.js 和 .vue 文件）中使用 process.env.VUE_APP_ENV_VARIABLE。

更新

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

Answer 3

在 vue-cli 版本 3 中：

.env 文件有以下三个选项：您可以使用 .env 或：

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

您可以使用自定义 .env 变量，方法是将前缀正则表达式用作 /^/ 而不是 /node_modules/@vue/cli-service/lib/util/resolveClientEnv.js:prefixRE

中的 /^VUE_APP_/

为了开发开源应用程序，在不同模式下开发开源应用程序，如 .env 文件的测试、开发和生产，当然不推荐这样做。因为每次 npm install .. ，它都会被覆盖。

Answer 4

我运行遇到的一个问题是 我正在为 VueJS 使用 webpack-simple install，它似乎不包含环境变量配置文件夹。所以我无法编辑 env.test、开发和 production.js 配置文件。创建它们也没有帮助。

其他答案对我来说不够详细，所以我只是 "fiddled" 和 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'"
      }
    })
  ]);
}

我还应该注意到，您似乎出于某种原因需要“'”双引号。

所以，在开发中，我现在可以访问这些环境变量：

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

}

Answer 5

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

.env
.env.someEnvironment1
.env.SomeEnvironment2

然后要加载这些配置，您可以通过 mode 指定环境，即

npm run serve --mode development //default mode
npm run serve --mode someEnvironment1

在您的 env 文件中，您只需将配置声明为 key-value 对，但如果您使用的是 vue 3，则必须前缀为 VUE_APP_:

在你的 .env:

VUE_APP_TITLE=This will get overwritten if more specific available

.env.someEnvironment1:

VUE_APP_TITLE=My App (someEnvironment1)

然后您可以通过以下方式在您的任何组件中使用它：

myComponent.vue:

<template>
  <div> 
    {{title}}
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      title: process.env.VUE_APP_TITLE
    };
  }
};
</script>

现在，如果您运行没有 mode 的应用程序，它将显示 'This will get...'，但如果您指定 someEnvironment1 作为您的 mode，那么您将从那里获得标题。

您可以通过将 .local 附加到您的文件来创建 'hidden' 来自 git 的配置：.env.someEnvironment1.local - 当您有秘密时非常有用。

阅读 the docs 了解更多信息。

Answer 6

在根文件夹中创建两个文件（package.json 附近）.env 和 .env.production
将变量添加到前缀为 VUE_APP_ 的这些文件中，例如：VUE_APP_WHATEVERYOUWANT
serve 使用 .env 而 build 使用 .env.production
在你的组件（vue 或 js）中，使用 process.env.VUE_APP_WHATEVERYOUWANT 来调用 value
不要忘记重新启动 serve 如果当前运行
清除浏览器缓存

请确保您使用的是 vue-cli 版本 3 或更高版本

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

Answer 7

对于那些使用 Vue CLI 3 和 webpack-simple 安装的人来说， did work for me however I wasn't keen on adding my environment variables to my webpack.config.js as I wanted to commit it to GitHub. Instead I installed the dotenv-webpack 插件似乎可以从项目根目录的 .env 文件中加载环境变量，而无需需要在环境变量前添加 VUE_APP_。

Answer 8

除了前面的答案之外，如果您希望在 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/

Answer 9

这就是我编辑 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)
                }
            })
        ]
    }
};

Answer 10

重要（在 Vue 4 中，也可能在 Vue 3+ 中！）：我设置了 VUE_APP_VAR 但无法通过控制台日志记录过程和打开 env 对象看到它。我可以通过记录或引用 process.env.VUE_APP_VAR 来查看它。我不确定这是为什么，但请注意，您必须直接访问变量！

Answer 11

运行具有不同 `.env` 文件的多个构建

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

根据我的经验，更改 build modes can have side effects as other parts of the build process can rely on being in production for example, so here's another way to provide a custom env file ():

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，因此其中设置的任何设置都不适用于 custom 版本。

注意 2：这将在 .env.custom 之前加载 .env.production，因此如果您不想在 .env.production 中设置任何环境变量，请在 custom 构建，您需要将它们设置为 .env.custom.

中的空白字符串

注3：If you don't set override: true then environment variables in .env.production will take precedence over .env.custom.

注意 4：如果您希望使用 vue-cli、.

进行多个不同的构建

Answer 12

我在 vuecli@5 中遇到了同样的问题。试图通过阅读官方文档来解决但无法获得适当的解决方案。很长一段时间后，我得到了解决方案，它工作正常。

在根目录创建 .env 文件。 触摸.env
为其设置值，即 APP_NAME=name
vue.config.js 文件过去 process.env.VUE_APP_VERSION = require('./package.json').version
登录任何方法console.log(process.env.APP_NAME);

在 Vue.js 中使用环境变量

Using Environment Variables with Vue.js

environment-variables

node.js

vue.js

vue-cli

vue-cli-3

更新

运行具有不同 `.env` 文件的多个构建

package.json

vue.config.custom.js

在 Vue.js 中使用环境变量

Using Environment Variables with Vue.js

environment-variables

node.js

vue.js

vue-cli

vue-cli-3

更新

运行 具有不同 .env 文件的多个构建

package.json

vue.config.custom.js

运行具有不同 `.env` 文件的多个构建