Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

Blessed by Buddha, there is no bug. Hello everyone! I am across the sea!

Sometimes we are only responsible for one subsystem of a large platform system, and sometimes we need to call the interfaces of other subsystems of the large platform system.

If the address of other interfaces is directly written in the code, then if the interface of other subsystems is adjusted, it will affect our system, and we have to repackage and deploy, which will be very tedious.

You don’t want to be lying at home when a phone call/message comes, “Oh, hai, we have adjusted the interface of the system, and you have to update it again”, is that annoying? How do you do that?

solution

Here’s the idea:

  1. When you type code, if you want toInterfaces that reference other people or third partiesYou can make oneThe configuration file
  2. thisThe configuration file, in ourAfter the VUE project is packagedIs independent of each other, not the wholeVue projectThey were all thrown into a ball.

So inside the configuration to change what, can be directly let the operation and maintenance personnel directly change, as long as it does not involve the change of requirements, new functions, modification, we can free

To solve the process

  1. Create/open oneVue project

  1. Open theThe public folder

There is no static folder in my new vue project, so I will create a new one and create a config.js file in this static folder

The contents of config.js are as follows:

// The interface of another person or third party to reference
window.server = {
  fileUploadUrl: "IP address".// Address of the development environment interface
  // fileUploadUrl: "IP address ", // test environment interface address
  // fileUploadUrl: "IP address ", // official environment interface address
}
Copy the code
  1. inindex.html 中The introduction ofjust-createdconfig.js

  1. The introduction ofconfig.jsLater, inSpecific required modulesIn thecall
     // Call the imported address
    console.log(window.server.fileUploadUrl);
Copy the code

Effect of 5.

Added: Unified management of the project configuration interface

  1. For example, if we want to jump to another page, then use the above method
  2. But we do projects,Front and back separation, the current project configuration interface to use, we generally operate like this

SRC /libs/index.js contents:

const configAPI = {
  // xx module 1- Interface 1
  module_1_xxx1: '/LocalDemoApi/moduleApi/module_1/xxx.json'.// Before the backend interface is given, you can also make some JSON data to simulate the situation of calling the interface
  // xx module 1-- Interface 2
  module_1_xxx2: '/api/moduleApi/module_1/xxxx'.// Actually call the interface
  // xx module 2-- Interface 1
  module_2_xxx1: '/api//moduleApi/module_2/xxxx'.// Actually call the interface
  // ...
};
export default configAPI;

// The LocalDemoApi at the beginning of the interface is configured in the proxy of devServer in vue.config.js
Copy the code

Then the following code is introduced in main.js:

import configAPI from './libs/apis/index';
// Unified interface management
Vue.prototype.$configAPI = configAPI;
Copy the code

Then configure into the VUE project,

The vue.config.js file is as follows:

const path = require("path");

const webpack = require('webpack');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  // Run the environment directory after packaging
  publicPath: process.env.NODE_ENV === "production" ? "/xxxProject/" : "/".lintOnSave: true.// whether eslint-loader checks when saving
  productionSourceMap: false.// Whether the production environment generates the sourceMap file
  filenameHashing: true./ / file hash
  devServer: {
    // port: 3306,
    open: true.proxy: {
      "/api": {
        / / target: "http://192.168.xxx.xxx:xxxx/", / / the development of geology
        / / target: "http://192.168.xx.xx:xxxx/", / / test the address
        target: "http://xxx.xxx.xxx.x:xxxx/".// Official server address
        ws: true.changeOrigin: true.pathRewrite: {}},// Here is access to the local mock JSON data
      "/LocalDemoApi": {
        target: "http://localhost:8080".// The path points to the local host address and port number
        ws: true.changeOrigin: true.pathRewrite: {
          "^/LocalDemoApi": "/DemoData" // Path-forwarding proxy}}}},chainWebpack: config= > {
    Resolve. Alias is implemented in Webpack. Add and modify the desired alias configuration using the set method
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components")); }};Copy the code

Restart the project

The DemoData directory where the simulated JSON data is stored is the DemoData folder in public (this folder is created by myself, you can also choose another name, as long as you change the name, then the DemoData in vue.config.js should also change the corresponding name).

Finally, you package, and the default folder generated by the package is the dist folder

Therefore, for this package to take effect when deployed on the server, you need to rename the dist folder to the xxxProject name configured in vue.config.js

Now that you’ve seen this, please give me a thumbs up before you go, because your thumbs up means a lot to me