前言
有时候我们负责做的只是一个大平台系统
下的某个子系统
,有时候我们需要调用这个大平台系统
下别的子系统
的接口
。
如果直接把别的接口地址,直接写在代码里,那么如果别的子系统的接口调整了,会影响到我们的系统,我们还要重新打包,部署,会很繁琐。
解决思路
我们的想法是这样:
- 敲代码的时候,如果要
引用其他人或者第三方的接口
,可以弄成一个配置文件
- 这个
配置文件
,在我们的vue项目打包之后
,也是独立存在的,而不是和整个vue项目
一起被打成一个团子了。 这样里面的配置要改什么的,就可以直接让运维人员直接改,只要不涉及需求的更改,功能的新增,修改,我们就可以解放了
解决过程
-
新建/打开 一个
vue项目
-
打开
public文件夹
我这个新建的vue项目
里面没有static文件夹
,那我新建一个,并在这个static文件夹
里新建一个config.js
文件
config.js
中的内容如下:
js
复制代码
// 要引用的 其他人 或者 第三方 的接口
window.server = {
fileUploadUrl: "ip地址", // 开发环境接口地址
// fileUploadUrl: "ip地址", // 测试环境接口地址
// fileUploadUrl: "ip地址", // 正式环境接口地址
}
- 在
index.html
中引入
刚刚创建的config.js
- 引入
config.js
之后,在具体需要的模块
中进行调用
js
复制代码
// 调用引入的地址
console.log(window.server.fileUploadUrl);
5. 效果
补充:统一管理本项目配置的接口
- 像我们如果要跳转到别的页面,那么用上面的这种方式
- 但是我们做项目,
前端后分离
,当前项目配置的接口要用,我们一般这般操作
src/libs/index.js
中的内容:
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
中引入 代码如下:
js
复制代码
import configAPI from './libs/apis/index';
// 接口统一管理
Vue.prototype.$configAPI = configAPI;
然后是配置到vue项目
中,
vue.config.js
文件如下:
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
名字才能生效。