vue项目打包后生成一个配置文件可以修改打包后的服务器api地址

vue项目打包后生成一个配置文件可以修改打包后的服务器api地址

问题描述：vue项目打包上线之后，如果要改服务器api地址，只能在源码更改然后重新打包发布，为了解决这个问题，我们可以在static增加一个config.json文件，然后打包的时候它不会被打包，从而在里面修改服务器地址，这样就不用在源码更改。
我觉得这是最简单的办法，不用修改build里面webpack.prod.conf配置文件
1.在static创建config.json文件

以上是需要更改的三个文件

//服务器ip地址
{"ApiUrl":"http://192.168.0.158"}

2.在main.js加入以下代码

//要引入axios才能用
//注意获取config.json的地址
axios.get("./../static/config.json").then((result)=>{
console.log(result)
//存到localStorage里面，方便在其他页面获取
localStorage.setItem('ApiUrl',result.data.ApiUrl);
console.log(localStorage.getItem('ApiUrl'));
//也可以声明成全局变量,在其他页面用this.ApiUrl获取
//  Vue.prototype.ApiUrl=result.data.ApiUrl
}).catch((error)=>{console.log(error)});

3.在你存放接口的文档api.js获取

console.log(localStorage.getItem('ApiUrl'))
const APIV1 = localStorage.getItem('ApiUrl')+'/api/v1'

4.运行npm run build，打包好的dist里面的static里面会新增一个config.json文件（这就是我们想要的修改服务器api地址的入口）

5.测试：安装http-server或者anywhere 搭建web服务器环境(建议使用anywhere)

npm install anywhere -g

在dist打开命令行 输入anywhere，浏览器会自己打开，那么你打包好的项目就相当于在服务器上运行了，这时你再修改config.json里面的地址，刷新网页，你会发现地址已经更改为你刚改的地址了。