vue项目打包之后,修改后台接口,以及生产环境和开发环境的接口配置

场景:在公司开发时用的是后台搭建的服务器,但是拿到外面部署时用的是真实服务器,不想每次改一次ip就打包一次,而且去部署时也不一定提前知道对方的ip…无法现场打包

首先我们配置开发环境与生产环境接口地址,
congif > dev.env.js：开发环境
congif > prod.env.js：正式（生产）环境

这里的window.g.ApiUrl后面再讲,这里可以写成真实服务器ip
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  //生产环境的url
  API_ROOT: 'window.g.ApiUrl'
}

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  //开发环境的url
  API_ROOT: '"http://192.168.2.32:8081/data-store"'
})

然后在用到这两个地址的时候使用 process.env.API_ROOT,
我这里是把地址存在vuex里面

这样一来,webpack就会自动区分环境,npm run dev时用开发地址,npm run build时用线上地址

再说一下打包之后怎么修改配置,在任何地方部署都不需要重新打包
第一步:在项目的static文件夹下新建config.js,内容如下
目的是把地址存到window全局下

window.g = {
    AXIOS_TIMEOUT: 10000,
    ApiUrl: "http://192.168.2.32:8081/data-store", // 配置服务器地址,
    ParentPage: {
        CrossDomainProxyUrl: '/Home/CrossDomainProxy',
        BtnsApi: '/api/services/app/Authorization/GetBtns',
        OrgsApi: '/api/services/app/authorization/GetOrgsByUserId'
    }
}

第二步：在index.html里面引入这个config.js
注意路径

<script type="text/javascript" src="./static/config.js"></script>

第三步:在任意处使用 window.g.ApiUrl 调用接口
我这里是在生产环境的ip配置里调用的

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  //生产环境的url
  API_ROOT: 'window.g.ApiUrl'
}

此方法能有效解决打包,接口配置等问题,亲测有效,不会把config.js也打包进去
另外网上还有一种办法使用generate-asset-webpack-plugin
https://www.jianshu.com/p/377bfd2d9034
https://blog.csdn.net/qq_41409679/article/details/84878642
尝试之后会有报错,可能是我操作不当