在Vue.js中使用环境变量

Question 1

我一直在阅读官方文档，但无法找到有关环境变量的任何信息。显然，有一些社区项目支持环境变量，但这对我来说可能是过大了。所以我想知道在使用Vue CLI创建的项目上是否有一些简单的开箱即用的功能可以正常工作。

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

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

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

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

Question 2

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

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

Question 3

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

在根目录中，创建一个.env文件，其内容如下：

VUE_APP_ENV_VARIABLE=value

并且，如果它正在运行，则需要重新启动serve，以便可以加载新的env var。

这样，您就可以在项目（.js和.vue文件）中使用process.env.VUE_APP_ENV_VARIABLE。

更新资料

根据@ ali6p的说法，对于Vue Cli 3，不需要安装dotenv依赖项。

Question 4

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

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

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

Question 5

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

.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 ...”，但如果您指定asomeEnvironment1作为您mode的名称，那么您将从那里获得标题。

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

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

Question 6

我遇到的一个问题是我正在为VueJS使用webpack-simple安装，但似乎没有包含Environment Variable config文件夹。因此，我无法编辑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'"
      }
    })
  ]);

}

Question 7

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

Question 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/

Question 9

在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 ..，它都会被覆盖。

Question 10

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

Question 11

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