vue3 静态配置文件

前言

有时候我们负责做的只是一个大平台系统下的某个子系统，有时候我们需要调用这个大平台系统下别的子系统的接口。

如果直接把别的接口地址，直接写在代码里，那么如果别的子系统的接口调整了，会影响到我们的系统，我们还要重新打包，部署，会很繁琐。

解决思路

我们的想法是这样：

敲代码的时候，如果要引用其他人或者第三方的接口，可以弄成一个配置文件
这个配置文件，在我们的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"));
  },
};