将环境变量与Vue.js一起使用

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文档:

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

在main.js中

VUE_APP_ENV_VARIABLE=value

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

VUE_APP_ENV_VARIABLE=value

有了这个,您将能够在项目中使用process.env.VUE_APP_ENV_VARIABLE(.js和.vue文件).

Answer 3

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

Answer 4

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

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

因此，在 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'"
      }
    })
  ]);

}

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

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

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

Answer 6

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