vue 開發、集成、正式環境使用不同npm指令打包

項目中一般上線的流程是開發測試-->集成測試-->正式環境。平時我們開發好的一個版本代碼都是在開發測試環境測試，然后是上集成測試給測試組專門測試用，最后是上線到生產環境給客戶使用。

這時候項目打包會用到不同的地址，但是又不可能每次都去修改我們自己配的公共的接口地址，所有我們會根據不同的npm指令去打包不同的環境的版本。

首先，介紹一下項目使用vue框架的代碼結構，項目使用的是vue單頁面開發，創建了一個api.js文件用於存放所有的接口URL和所有環境的地址

let serverConfig = {  //打包環境
        'dev': ['http://xxx','http://xxx'],           // npm run build
        'release': ['http://xxx','http://xxx'],          // npm run build release
        'master': ['http://xxx','http://xxx'],           // npm run build master
        'default': ['http://xxx', 'http://xxx']       // npm run dev
    },
    curServer = BUILD_SERVICE_CONFIG ? serverConfig[BUILD_SERVICE_CONFIG] : serverConfig['default'],
    apiPath = curServer[0],
    basicPath = curServer[1],
    api = `${apiPath}/cus/custbizrelmng`,                                                // 客戶地址   
    apiBasicUrl = `${basicPath}/bas/bizqueryprivapp/basiccenter/queryservice`;           // 基礎地址

export default {
    replace(Url, val1, val2) {
        for(let i = 0; i < val1.length; i++) {
            Url = Url.replace(val1[i], val2[i])
        }
        return Url
    },

    //公共路徑
    url: '../',

　　　　// 權限
　　　　GetUserStorage: apiBasicUrl + "/systemUser"

}

注意：項目中用到了兩個平台提供的接口，所以配了兩個變量，如果只有一個平台提供接口，那就只需要配一個

代碼貼出來了，還是不能正常運行打包的，因為還沒有配置打包文件和運行配置文件

webpack.dev.conf.js文件配置

new webpack.DefinePlugin({
      'process.env': require('../config/dev.env'),
      'BUILD_SERVICE_CONFIG': JSON.stringify('') //獲取打包時 不同的參數
　　}),

webpack.prod.conf.js文件配置

new webpack.DefinePlugin({
      'process.env': env,
      'BUILD_SERVICE_CONFIG': JSON.stringify(process.argv.splice(2)[0]) //獲取打包時 不同的參數
    }),

做好這些工作后就可以用不同的npm指令打包不同環境的代碼版本了