Question

我一直在阅读官方文档，而且我无法找到有关环境变量的任何内容。显然有些社区项目支持环境变量，但这对我来说可能有点过头了。所以我想知道在使用Vue CLI创建的项目时，是否有一些简单的开箱即用的东西。

例如，我可以看到，如果我执行以下操作，正确的环境会打印出已经设置好的含义吗？

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

我是env变量和Node的新手。

仅供参考，使用Vue 3.0测试版。

Answer 1

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

我的理解是，您需要做的就是创建.env文件并添加变量，然后您就可以开始了！：）

如以下评论中所述： 如果您使用的是Vue cli 3，则只会加载以 VUE_APP _ 开头的变量。

Answer 2

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

在根目录中，使用以下命令创建一个.env文件：

VUE_APP_ENV_VARIABLE=value

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

更新

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

Answer 3

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

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

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

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附加到文件中来创建从git'隐藏'的配置：.env.someEnvironment1.local-当您拥有秘密时非常有用。

阅读the docs了解更多信息。

Answer 4

我遇到的一个问题是我正在为VueJS使用webpack简易安装，其中似乎没有包含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'"
      }
    })
  ]);
}

我还应该注意，由于某些原因，您似乎需要使用双引号。“

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

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

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

Answer 6

在vue-cli版本3中：

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

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

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

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

Answer 7

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

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

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

Answer 8

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

Answer 9

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

这是我编辑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.js一起使用

10 个答案:

更新