前言
有时候我们负责做的只是一个大平台系统下的某个子系统，有时候我们需要调用这个大平台系统下别的子系统的接口。
如果直接把别的接口地址，直接写在代码里，那么如果别的子系统的接口调整了，会影响到我们的系统，我们还要重新打包，部署，会很繁琐。
解决思路
我们的想法是这样：
- 敲代码的时候，如果要
引用其他人或者第三方的接口，可以弄成一个配置文件 - 这个
配置文件，在我们的vue项目打包之后，也是独立存在的，而不是和整个vue项目一起被打成一个团子了。 这样里面的配置要改什么的，就可以直接让运维人员直接改，只要不涉及需求的更改，功能的新增，修改，我们就可以解放了
解决过程
-
新建/打开 一个
vue项目 -
打开
public文件夹
我这个新建的vue项目里面没有static文件夹，那我新建一个,并在这个static文件夹里新建一个config.js文件
config.js中的内容如下：
// 要引用的 其他人 或者 第三方 的接口
window.server = {
fileUploadUrl: "ip地址", // 开发环境接口地址
// fileUploadUrl: "ip地址", // 测试环境接口地址
// fileUploadUrl: "ip地址", // 正式环境接口地址
}
- 在
index.html中引入刚刚创建的config.js
- 引入
config.js之后，在具体需要的模块中进行调用
// 调用引入的地址
console.log(window.server.fileUploadUrl);
5. 效果
补充：统一管理本项目配置的接口
- 像我们如果要跳转到别的页面，那么用上面的这种方式
- 但是我们做项目，
前端后分离，当前项目配置的接口要用，我们一般这般操作
src/libs/index.js 中的内容：
const configAPI = {
// xx模块1---接口1
module_1_xxx1: '/LocalDemoApi/moduleApi/module_1/xxx.json', // 后端接口还没给出来之前，你也可以自己弄点json数据，模拟一下调接口的情况
// xx模块1---接口2
module_1_xxx2: '/api/moduleApi/module_1/xxxx', // 实际调用接口
// xx模块2---接口1
module_2_xxx1: '/api//moduleApi/module_2/xxxx', // 实际调用接口
// ...
};
export default configAPI;
// 此处的接口 开头的 LocalDemoApi， api 都是vue.config.js中 devServer下的 proxy 中配置的
然后 main.js中引入 代码如下：
import configAPI from './libs/apis/index';
// 接口统一管理
Vue.prototype.$configAPI = configAPI;
然后是配置到vue项目中，
vue.config.js文件如下：
const path = require("path");
const webpack = require('webpack');
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
// 打包后运行环境目录
publicPath: process.env.NODE_ENV === "production" ? "/xxxProject/" : "/",
lintOnSave: true, // eslint-loader 是否在保存的时候检查
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
filenameHashing: true, // 文件hash
devServer: {
// port: 3306,
open: true,
proxy: {
"/api": {
// target: "http://192.168.xxx.xxx:xxxx/", //开发地质
// target: "http://192.168.xx.xx:xxxx/", // 测试地址
target: "http://xxx.xxx.xxx.x:xxxx/", // 正式服务器地址
ws: true,
changeOrigin: true,
pathRewrite: {
}
},
// 这里就是访问本地的模拟json数据了
"/LocalDemoApi": {
target: "http://localhost:8080", // 路径指向本地主机地址及端口号
ws: true,
changeOrigin: true,
pathRewrite: {
"^/LocalDemoApi": "/DemoData" // 路径转发代理
}
},
}
},
chainWebpack: config => {
// 配置import 和 require 等路径别名,webpack中是通过 resolve.alias 来实现此功能的,通过set方法添加修改想要的alias 配置
config.resolve.alias
.set("@", resolve("src"))
.set("assets", resolve("src/assets"))
.set("components", resolve("src/components"));
},
};
重启下项目即可
DemoData 这个存放模拟json数据的目录 就是public中的DemoData文件夹(这个文件夹是我自己创建的，大家也可以取别的名字，只要这个名字你改变了， 那么 vue.config.js中的DemoData 也要改成相应的名字)
最后，你打包了，打包默认生成的文件夹是dist文件夹
所以，这个包要部署到服务器上生效，需要把这个 dist文件夹，改名为vue.config.js 中配置的 xxxProject 名字才能生效。