vue官方webpack模版多个打包环境搭建

1.为何须要多个打包环境

真实开发中，至少有一个开发环境，一个测试环境，再最后才是生产环境。在官方的模版中只设置了一个打包环境，这样不一样环境的特殊变量就须要咱们每次手动更改，手动就意味着失误，人不是机器，太容易遗漏了，因此咱们稍微来改造下官方的构建文件。

2.目录结构

咱们先来看下原来的目录

和打包配置相关的是build，config文件夹以及package.json文件，咱们先看一下package.json

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  }
复制代码

只有一个build命令，而后咱们接着看看build/build.js文件

const config = require('../config')
    const webpackConfig = require('./webpack.prod.conf')
复制代码

咱们再看看build/webpack.prod.conf文件

const env = require('../config/prod.env')
    new webpack.DefinePlugin({
      'process.env': env
    }),
复制代码

webpack.DefinePlugin插件容许你建立一个在编译时能够配置的全局常量，也就是在前端工程中能够取到声明的值process.env，能够实现咱们手动更改的配置值。 接下来就简单了，咱们只须要增长
build/build.dev.js,
build/build.uat.js,
build/webpack.dev.conf.js,
build/webpack.uat.conf.js,
config/dev.env.js,
config/uat.env.js
就能够了，咦～出现了一个问题，build/webpack.dev.conf.js和config/dev.env.js文件已经存在了，在原来的项目中这个文件是干什么用的呢？ 咱们进行一下追踪：

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
复制代码

在npm run dev的时候使用，也就是说这两个文件是启动本地环境的时候用到。这样的话这个命名可能会误导咱们，咱们将原来的文件改为如下：

build/webpack.local.conf.js,
config/local.env.js,
复制代码

固然在相应的文件里的引用也应该进行修改。这个时候咱们就能够安心的加上dev和uat的打包配置文件了。

3.文件修改

仿照prod文件，咱们进行dev环境的增长 package.json新增build:dev命令

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "build:dev": "node build/build.dev.js"
  }
复制代码

config/dev.env.js配置全局变量

'use strict'

module.exports = {
	NODE_ENV: '"production_dev"'
}
复制代码

build/build.dev.js首先将build/build.js文件内容所有拷贝过来，而后把webpackConfig进行修改

const webpackConfig = require('./webpack.dev.conf')
复制代码

build/webpack.dev.conf.js首先把build/webpack.prod.conf.js文件拷贝过来，而后修改

const env = require('../config/dev.env')
复制代码

至于其余的，可根据实际状况进行定制化优化，好比在dev环境不须要代码压缩，咱们可将uglifyjs-webpack-plugin删除等。uat环境相似。最后在咱们的前端工程里就能够出现以下的配置了：

let appId
if (process.env.NODE_ENV === 'development') { // 本地环境配置
  appId = ''
} else if (process.env.NODE_ENV === 'production_release') { // 生产环境配置
  appId = 'release'
} else if (process.env.NODE_ENV === 'production_dev') { // 开发环境配置
  appId = 'dev'
} else if (process.env.NODE_ENV === 'production_uat') { // 测试环境配置
  appId = 'uat'
}
复制代码

最后文件目录以下：

至少打包微信公众号工程很省事啦！`( ∩_∩)′