前言

有時候我們負責做的只是一個大平臺系統下的某個子系統，有時候我們需要調用這個大平臺系統下別的子系統的接口。

如果直接把別的接口地址，直接寫在代碼里，那么如果別的子系統的接口調整了，會影響到我們的系統，我們還要重新打包，部署，會很繁瑣。

解決思路

我們的想法是這樣：

  1. 敲代碼的時候，如果要引用其他人或者第三方的接口，可以弄成一個配置文件
  2. 這個配置文件，在我們的vue項目打包之后，也是獨立存在的，而不是和整個vue項目一起被打成一個團子了。 這樣里面的配置要改什么的，就可以直接讓運維人員直接改，只要不涉及需求的更改，功能的新增，修改，我們就可以解放了

解決過程

  1. 新建/打開 一個vue項目 image.png

  2. 打開public文件夾

image.png

我這個新建的vue項目里面沒有static文件夾，那我新建一個,并在這個static文件夾里新建一個config.js文件

image.png

config.js中的內容如下：

 
js
復制代碼
// 要引用的 其他人 或者 第三方 的接口
window.server = {
  fileUploadUrl: "ip地址", // 開發環境接口地址
  // fileUploadUrl: "ip地址", // 測試環境接口地址
  // fileUploadUrl: "ip地址", // 正式環境接口地址
}
  1. 在 index.html 中引入 剛剛創建的 config.js

image.png

  1. 引入config.js之后，在具體需要的模塊中進行調用
 
js
復制代碼
     // 調用引入的地址
    console.log(window.server.fileUploadUrl);

image.png 5. 效果

image.png

補充：統一管理本項目配置的接口

  1. 像我們如果要跳轉到別的頁面，那么用上面的這種方式
  2. 但是我們做項目，前端后分離，當前項目配置的接口要用，我們一般這般操作

image.png

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項目中，

image.png

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 也要改成相應的名字)

image.png

最后，你打包了，打包默認生成的文件夾是dist文件夾

image.png

所以，這個包要部署到服務器上生效，需要把這個 dist文件夾，改名為vue.config.js 中配置的 xxxProject 名字才能生效。