npm run build 打包爬坑记（2）生产、测试打包

随着新功能、新需求的开发，每次打包都能遇到新的问题
比如说这个上线了一版本就不能随便改动了，所以要在线下来一版，线下开发时有时候需要链接正式数据、有时候需要测试数据，所以要分线下测试正式，好吧，晕了，简单点，没有什么是图表解释不了的，请看图表：

1. 首先部署是要后台部署，我们用的Xshell 4,这里是后台写的部署，我们只需要按照后台部署好的，让后台区分一下git支线和打包命令就可以
2. 然后看我们代码，终端运行代码在package.json中更改，这个简单把现有的dev和build拷贝，然后换命令即可。

	"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "devtest": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "e2e": "node test/e2e/runner.js",
    "test": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js",
    "buildtest": "node build/build.js"
  },

3. 然后就是在config中区分： 最好把每一个环境默认的写在else里面

//dev.env.js 
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
//npm 提供的获取当前正在运行的脚本的名称
let target = process.env.npm_lifecycle_event;
let obj = {}
if (target === 'devtest') {
  obj = {
    NODE_ENV: '"development"',
    isDev: false,
    BASE_OLD_URL: '"https://xxx/"', //老项目
    BASE_IMG_URL: '"https://xxx/"', //头像上传
  }
} else {
  obj = {
    NODE_ENV: '"development"',
    isDev: true,
    BASE_OLD_URL: '"http://xxx"', //老项目
    BASE_IMG_URL: '"http://xxx"', //头像上传
  }
}
module.exports = merge(prodEnv, obj)

//prod.env.js 
'use strict'
// let isDev = "false"
let target = process.env.npm_lifecycle_event;
let obj = {}
if (target === 'buildtest') {
  obj = {
    NODE_ENV: '"production"',
    isDev: true,
    BASE_OLD_URL: '"https://xxx/"', //老项目
    BASE_IMG_URL: '"https://xxx/"', //头像上传
  }
} else {
  obj = {
    NODE_ENV: '"production"',
    isDev: false,
    BASE_OLD_URL: '"https://xxx/"', //老项目
    BASE_IMG_URL: '"https://xxx/"', //头像上传
  }
}
module.exports = obj

4. 然后就是调用了：我建了文件夹api，里面用来存放域名

let pe = process.env  //获取环境参数
let isDev = pe.isDev || false;
let baseOldUrl = pe.BASE_OLD_URL;//老项目
let baseImgUrl = pe.BASE_IMG_URL;//头像上传
//这些参数拼接在每个接口中
export {
    isDev,
    baseOldUrl,
    baseImgUrl,
}

5. isDev用法： isDev 表示这里接口数据是正式的还是测试的，这个可以引入全局，这样就可以根据这个来展示在测试环境和正式环境不同的代码了；比如微信登录测试一般用不了，所以测试多半是手机号登录，这样就用this.$isdev区分，false展示微信登录代码，true展示手机号登录

import { isDev } from "api/url.js"
Vue.prototype.$isdev = isDev;

6. 前端好多都是内嵌页、m站等等一系列在手机站展示的写在了同一个项目，如果分别建项目很麻烦，那么就需要分开入口，有个方法就是根据不同的打包命令，创建不同的首页（本人的做法，不知道好不好，不过能实现）；
   还有一个好像是创建多页面，这个试过一次，不过后台不知道为啥xshell不能搞定这个访问域名，就放弃了