vue webpack打包之后 重新修改配置文件接口API路径,无需修改代码后再打包

Posted 2021-08-26 奔驰的码儿

用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，但是有的时候需要修改接口地址，为了避免为了修改接口地址而进行修改代码后再重新打包的繁琐，解决呢方法很多，推荐一种最便捷的方法，也是最容易操作的方法，亲测有用！

 

1.首先我们在public目录下的static文件下建立一个config.js文件，内容如下：

1 window.g = {
2   AXios_TIMEOUT: 10000,
3   ApiUrl: \'http://localhost:xxxx/api\', // 配置服务器地址,
4   ParentPage: {
5     CrossDomainProxyUrl: \'/Home/CrossDomainProxy\',
6     BtnsApi: \'/api/services/app/Authorization/GetBtns\',
7     OrgsApi: \'/api/services/app/authorization/GetOrgsByUserId\'
8   },
9 }

2.接下来我们在public目录下的index.html这个入口文件里引入该文件（注意路径）

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

3.然后就可以在需要的地方随意获取就行了，比如：

var baseURLStr = window.g.ApiUrl
// 创建axios实例
const service = axios.create({
  baseURL: baseURLStr, // api的base_url
  timeout: 5000 // 请求超时时间
})

4.在打包成功之后，config,js文件不会被打包，依然存在static文件夹下，如果需要修改只需要用记事本打开文件修改地址就OK了，而且该方法也不会影响开发模式，是不是很简单有效呢，快去尝试一下吧：
5.最后再教一个运行打包后的dist静态文件的方法哈，如下：

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

npm install anywhere -g

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

 

恭喜你又学到了一招半式！！！！！   点个赞再走哈！！