在 Vue.js 中使用环境变量

带有 Webpack 的 Vue.js

如果您将 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_ 开头的变量。

如果它当前正在运行，请不要忘记重新启动服务。

Vue.js 与 Vite

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

您的 .env 应如下所示：

VITE_API_ENDPOINT=value
VITE_API_KEY=value

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

提示：当您在 .env 文件中更改或添加变量（如果它正在运行）时，请记住重新启动您的开发服务器。

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

---

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

在根目录中创建一个 .env 文件，其中包含：

VUE_APP_ENV_VARIABLE=value

而且，如果它正在运行，您需要重新启动服务，以便可以加载新的环境变量。

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

更新

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

---

在根文件夹（靠近 package.json）创建两个文件 .env 和 .env.production 将变量添加到带有 VUE_APP_ 前缀的文件中，例如：VUE_APP_WHATEVERYOUWANT 服务使用 .env 和构建使用 .env.production 在你的组件中（vue 或 js） , 使用 process.env.VUE_APP_WHATEVERYOUWANT 调用 value 如果当前正在运行不要忘记重新启动服务 清除浏览器缓存

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

有关详细信息：https://cli.vuejs.org/guide/mode-and-env.html

---

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

.env

.env.someEnvironment1

.env.SomeEnvironment2

然后加载这些配置，您可以通过 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

.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>

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

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

阅读 the docs 了解更多信息。

---

我遇到的一个问题是我正在使用 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'"
      }
    })
  ]);
}

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

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

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

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

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

---

除了前面的答案之外，如果您希望访问 sass 中的 VUE_APP_* 环境变量（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 4 和可能的 Vue 3+ 中！）：我设置了 VUE_APP_VAR 但无法通过控制台日志记录过程和打开 env 对象看到它。我可以通过记录或引用 process.env.VUE_APP_VAR 来查看它。我不确定为什么会这样，但请注意您必须直接访问该变量！

---

对于那些使用 Vue CLI 3 和 webpack-simple 安装的用户，Aaron's answer 确实对我有用，但我并不热衷于将环境变量添加到我的 webpack.config.js，因为我想将它提交到 GitHub。相反，我安装了 dotenv-webpack 插件，这似乎可以很好地从项目根目录的 .env 文件加载环境变量，而无需将 VUE_APP_ 添加到环境变量中。

---

使用不同的 .env 文件运行多个构建🏭

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

根据我的经验，更改 build modes 可能会产生副作用，因为例如构建过程的其他部分可能依赖于 production，因此这是提供自定义 env 文件 (based on @GrayedFox's answer) 的另一种方法：

包.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 swaps out the config from the default of vue.config.js，因此其中设置的任何设置都不适用于 custom 构建。

注意 2：这将在 .env.custom 之前加载 .env.production，因此如果您不希望在 custom 构建中设置在 .env.production 中的任何环境变量，您需要将它们设置为.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 进行多个不同的构建，the --skip-plugins option is very useful。

---

我在 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 );

---