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不能搞定這個訪問域名，就放棄了