vuejs 中的 webpack 无法访问 dev.env.js 中定义的键答案

【问题标题】：Keys defined in dev.env.js are not accessible with webpack in vuejsvuejs 中的 webpack 无法访问 dev.env.js 中定义的键
【发布时间】：2018-07-13 00:23:46
【问题描述】：

模板基于vuejs-webpack，构建、配置文件为here，这些文件我都没有修改过。

基于Environment Variables，在应用程序中运行npm run dev 时，dev.env.js 文件中定义的键必须是可访问的。

这是我dev.env.js的内容：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  SAMPLE: '"XX"',
  AUTH_URL: '"http://localhost:3030"'
})

当我尝试像这样process.env.AUTH_URL 访问App.vue 中的AUTH_URL 时，我收到undefined。

在我看来，dev.env.js 文件中定义的任何内容在运行 npm run dev 时将永远无法访问

【问题讨论】：

标签： javascript node.js webpack vue.js environment-variables

【解决方案1】：

使用webpack.DefinePlugin 定义您希望与前端共享的变量。 Webpack 本身不会将 process 暴露给浏览器，因为这是一个 node js function。

const dev_env = require('dev.env.js)

plugins: [
  new webpack.DefinePlugin({
    'process.env' : {
      NODE_ENV: JSON.stringify(dev_env.NODE_ENV)
    }
  })
]

上面的一些变体应该适合你。

【讨论】：

嗨@Ohgodwhy这仅适用于vue组件，但其他手动导入的js文件无法访问。但是我该如何实现呢？
@Photonic Webpack 不对其他文件负责。每当你在 webpack 中有这样的变量时，它们都会给它们起别名，所以这些变量对你来说是全局不可用的。考虑在外部要求 jQuery。

【解决方案2】：

如果您运行“npm run dev”，那么您的新环境变量仅在重新启动 npm 后可用（Ctrl + C 并再次“npm run dev”）。

【讨论】：