Webpack 小技巧——定义全局变量

前言

使用vue-cli脚手架工具，可能会遇到的问题，就是一个项目可能区分了生产的，测试，开发的构建配置文件，可能他们所有调用的api地址可能是不一样的。vue-cli也是提供了一个全变量process.env.NODE_ENV，分别是开发和生产，但在实际开发中，可能存在三种不同环境。然而WebPack内置提供了一个插件DefinePlugin。下面是具体操作步骤。

实现步骤

1. 在package.json文件中定义三个不同的变量

    "build:develop": "node build/build.js --config develop",
    "build:release": "node build/build.js --config release",
    "build": "node build/build.js",

2. 在跟目录下的config文件下修改如下,其中process.argv是nodejs一个api，它能获取你执行命令的一些参数

module.exports = {
  NODE_ENV: '"production"',
  NODE_TYPE: process.argv[process.argv.length - 1]
}

3. 在build/webpack.prod.conf.js文件下，新增DefinePlugin的配置

var config = require('../config')
var env = config.build.env

var webpackConfig = merge(baseWebpackConfig, {
     plugins: [
        new webpack.DefinePlugin({
          'process.env': JSON.stringify(env),
        })
    ]
})

使用

let server

// eslint-disable-next-line no-undef
if (process.env.NODE_TYPE === 'develop') {
  // 开发环境
  server = 'http://192.168.4.161'
// eslint-disable-next-line no-undef
} else if (process.env.NODE_TYPE === 'release') {
  // 测试环境
  server = 'http://116.63.56.200'
} else {
  // 正式环境
  server = 'http://116.63.56.200'
}

总结

over啦，就这么简单，如果项目是自动打包构建，那么就完全不用担心环境不同的问题拉。