dev.env.js 中定义的密钥不能通过 vuejs 中的 webpack 访问

Question

模板基于 vuejs-webpack，构建、配置文件在这里，我没有修改任何这些文件。

根据环境变量，在应用中运行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"'
})

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

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

Answer 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)
    }
  })
]

上述的一些变体应该适合您。

Answer 2

如果你运行"npm run dev"，那么你的新环境变量只有在重新启动 npm 后才可用(Ctrl + C 和再次的 'npm run dev'(。