Question

我有一个使用Webpack编译的Vue应用程序。我正在尝试在'npm run dev'命令中添加一个变量，然后我可以在整个项目中全局使用它。目前，我正在运行'npm --brand = foo run dev'并在build.js文件中安慰'process.env.brand'返回'foo'。现在我需要将其提供给项目的其余部分。这是我的设置：

WEBPACK.DEV.CONF.JS

var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')

module.exports = merge(baseWebpackConfig, {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    })
})

DEV.ENV.JS

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

文件结构是Build / build.js + webpack.dev.conf.js和Config / dev.env.js。我尝试添加如下所示的“品牌”属性，但在此文件中未定义process.env.brand。

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  brand: process.env.brand
})

Answer 1

更新@Linx直接从动态传递参数   命令行

运行命令并传入变量，如：npm --brand=foo run dev
  然后，变量随后在webpack配置文件中可用   process.env.npm_config_brand。

<小时/> 另一种选择是在npm脚本部分中设置变量：

<强>的package.json

{
  //...
  "scripts": {
    "dev": "SET brand=foo& webpack -p"
},

如果你使用的是linux，也许你应该删除SET - ＆gt; "dev": "brand=foo& webpack -p"

然后运行：npm run dev

这样的命令

<小时/> 在这两种情况下，为了使其可用于项目的其余部分，您可以使用webpack.DefinePlugin

module.exports = {
    //...
    plugins: [
        new webpack.DefinePlugin({
            '__BRAND__': process.env.brand,
        })
    ]
}

该变量可以在项目的其余部分访问，例如：console.log(__BRAND__);

使用Webpack构建自定义全局process.env变量

1 个答案: