在vue.js中使用环境变量

如果将vue cli与webpack模板(默认配置)一起使用,则可以创建环境变量并将其添加到.env文件中。

变量将在 process.env.variableName 在你的项目中。加载的变量也可用于所有Vue CLI服务命令、插件和依赖项。

你有几个选择,这是从 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 CLI3,则只有以 维耶亚普 将加载。

别忘了重新启动 服务 如果它当前正在运行。

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

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

VUE_APP_ENV_VARIABLE=value

这样,您就可以在项目(.js和.vue文件)中使用process.env.vue_app_env_变量。

更新

根据@ali6p的说法,使用vue cli 3安装dotenv依赖项是不必要的。

1. 在根文件夹中创建两个文件(靠近package.json) .env 和 .env.production
2. 向带有前缀的文件添加变量 VUE_APP_ 如: VUE_APP_WHATEVERYOUWANT
3. 服务 使用 Env 和 建造 使用 .环境生产
4. 在组件(vue或js)中,使用 process.env.VUE_APP_WHATEVERYOUWANT 调用值
5. 别忘了重新启动 服务 如果当前正在运行
6. 清除浏览器缓存

请确保您使用的是Vue CLI版本3或更高版本

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

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

• Env
• .env.some环境1
• .env.some环境2

要加载这些配置,您可以通过 mode 即

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

在你 env 文件您只需将配置声明为键值对,但如果您使用的是VUE3,则 必须 前缀与 VUE_APP_ :

在你 Env :

VUE_APP_TITLE=This will get overwritten if more specific available

.env.some环境1:

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>

现在如果你在没有 模式 它将显示“this will get…”,但如果指定 someEnvironment1 作为你 模式 然后你就可以从那里得到头衔了。

您可以通过添加 .local 到您的文件: .env.someEnvironment1.local -当你有秘密的时候很有用。

读 the docs 更多信息。

我遇到的一个问题是 我在使用webpack简单安装 对于似乎不包含环境变量配置文件夹的Vuejs。所以我无法编辑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 CLI版本3中:

.env文件有以下选项: 或者你可以用 .env 或:

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

您可以使用自定义 Env 变量使用前缀regex as /^/ 而不是 /^VUE_APP_/ 在里面 /node_modules/@vue/cli-service/lib/util/resolveClientEnv.js:prefixRE

当然,为了在不同的模式(如测试、开发和生产 Env 文件夹。因为每次你 npm install .. ,它将被重写。

对于使用vue cli 3和webpack simple install的用户, Aaron's answer 确实为我工作,但是我不想把我的环境变量添加到 webpack.config.js 因为我想把它提交给github。相反,我安装了 dotenv-webpack 插件,这似乎可以从 .env 文件位于项目的根目录,无需预先准备 VUE_APP_ 到环境变量。

除了前面的答案之外,如果您要访问sass中的vue_app_ux 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/

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