vue打包以后，如何配置文件修改全局接口地址

前言

前几天接到客户需求，做一个登记客户信息的表单，做好以后要求有一个配置文件可以修改全局接口，第一次做，查了网上各种资料，最终以失败告终，在朋友的帮助下最终成功！！！

---

 

一、vue打包以后，配置文件修改全局接口地址？

在网上查了一下大概有两种方式，尝试了第一种并没有成功，但是结合着第一种的思路终于还是完成了....

因为本人是刚进入前端的小白，所以做的小项目也比较简单，配置也比较少，简单易懂，适合新手！

• 1）在static上设置一个config.js，把配置的参数设置成 window 下的全局变量。这种方案的确可行，但是，但是，不安全！！！ 如果请求地址被恶意修改，后果不太好~
• 2）使用 generate-asset-webpack-plugin 插件，配置一大坨后生成一个静态文件，然后通过请求的方式，获取需要的数据，这种方法可以解决安全性问题，但是，但是，有点小麻烦啊~

二、使用方案及步骤

1.在 pubilc文件夹中新建一个 project.congig.json，把你要写的配置写入

代码如下（示例）：

放在pubilc目录下的原因是不被打包的时候打入，可以直接修改或访问！

2.在 main.js 中请求定义的配置文件，并放到 window中，使全局可访问，注意，这里把new Vue()放在请求里执行，是防止请求与页面渲染之间的时间差异化导致值获取不到，因此这样比较保险。

代码如下（示例）：

main.js中的res.data.ApiUrl可以放入window或者Vue.prototype，只要全局可以拿到即可；

3.在文件（.vue/.js）内使用即可

    (1).在.vue文件中使用

//即可取到值
console.log(window.url);

    (2).在.js文件中使用,因为我对目前做的小项目对接口做了封装，使用起来可能有所不同

import axios from "axios";

const service = axios.create({  
  withCredentials: false, // send cookies when cross-domain requests
  timeout: 10000, // request timeout
});
service.interceptors.request.use(config => {
  config.url=window.url+config.url;
  return config
})
service.defaults.withCredentials = false;
export default service;

 接口文件使用示例：

import request from "@/api/request.js";

// areaCode
export function getAreaCode(data) {
  return request({
    url: "/getHDAreaCode/GetHDAreaCode",
    method: "post",
    data,
  });
}

// District
export function getDistrict(data) {
  return request({
    url: "/getHDDistrict/GetHDDistrict",
    method: "post",
    data,
  });
}

4. 打包修改

---

总结

提示：这里对文章进行总结：
总体来讲使用起来并不算很难，但是对于第一次做或者新手来讲还是有一定难度的；

参考文献：https://www.cnblogs.com/webhmy/p/9517680.html