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指令打包不同环境的代码版本了

转载于:https://www.cnblogs.com/shenpeng/p/10185690.html