在Vue.js中使用环境变量

对于那些使用Vue CLI 3和webpack-simple安装的用户，Aaron的回答确实对我有用，但是我不希望将环境变量添加到我的环境中，webpack.config.js因为我想将其提交到GitHub。相反，我安装了dotenv-webpack插件，该插件似乎可以从.env项目根目录的文件中加载环境变量，而无需添加VUE_APP_环境变量。

在vue-cli版本3中：

.env文件有一些选项：您可以使用.env或：

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

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

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

除了先前的答案之外，如果您要访问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/

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

• .env
• .env.someEnvironment1
• .env.SomeEnvironment2

为了然后加载这些CONFIGS，你会指定环境通过mode即

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

在env文件中，您只需将config声明为键/值对，但是如果使用的是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 ...”，但如果您指定a someEnvironment1作为您mode的名称，那么您将从那里获得标题。

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

阅读文档以获取更多信息。

1. 在根文件夹（在package.json附近）中创建两个文件，.env然后.env.production
2. 将变量添加到带有前缀的theese文件中，VUE_APP_例如： VUE_APP_WHATEVERYOUWANT
3. 服务用途.env和建设用途.env.production
4. 在组件（vue或js）中，用于process.env.VUE_APP_WHATEVERYOUWANT调用值
5. 如果服务当前正在运行，请不要忘记重新启动它
6. 清除浏览器缓存

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

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

如果将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依赖项。