What should I do if the interface path api is missing after vue is packaged?

With the continuous development of front-end technology, front-end frameworks are also constantly improved and optimized. One of the more popular front-end frameworks currently is Vue. Vue is lightweight, easy to learn and use, and is favored by the majority of developers. But in the process of using Vue, some developers encountered a problem: after packaging, the interface path (api) disappeared. So what's the problem?

Problem description

During the development process, we will use the interface path, such as:

const url = '/api/user/login';

When we package the Vue project, we may find the interface path (api ) disappeared, such as:

const url = 'user/login';

This caused the request interface to fail.

Cause of the problem

The reason for this problem is that Vue uses webpack for packaging, and webpack’s packaging method is to package and compress all resources, including JS, CSS, and images. etc.

We can take a look at the vue.config.js configuration file in the Vue project:

module.exports = {
  // 配置打包和部署的根路径
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/',
  // 打包时不生成.map文件，加快打包速度
  productionSourceMap: false
};

Among them, publicPath is what we use after packaging path of. In the development environment, we use /, which represents the root path; and in the production environment, we use ./, which represents the relative path.

Since our interface path (api) is an absolute path, when packaging, the interface path (api) will be packaged into a relative path. This leads to the problem of the interface path (api) disappearing.

Solution

To solve this problem, we can use the following methods to solve it.

Method 1: Use absolute path

We can change the interface path (api) to an absolute path, that is, add the domain name prefix, such as:

const url = 'http://localhost:8080/api/user/login';

In this way, when packaging , the interface path (api) will not be packaged into a relative path.

Method 2: Configure the proxy

We can add the proxy in the vue.config.js configuration file to forward the interface path (api) to the target address. In the development environment, we use a development server, which itself is a proxy server. We can use this proxy server for forwarding.

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 目标地址
        changeOrigin: true, // 是否改变原始地址
        secure: true, // 是否使用https
        pathRewrite: {
          '^/api': '' // 路径重写
        }
      }
    }
  }
};

After configuring the proxy, when we request the interface in the code, we only need to write the relative path, such as:

const url = '/api/user/login';

In this way, the interface path (api) will not disappear after packaging .

Method 3: Use vue-cli-plugin-apimock

We can use the vue-cli-plugin-apimock plug-in to mock the interface. This plug-in allows us to use the interface path (api) with Mock data during the development phase, and then replace the interface path (api) with the real interface address during packaging. This can not only ensure development efficiency, but also avoid the problem of the interface path (api) disappearing.

Summary

Through the above analysis, we can see that the problem of the interface path (api) disappearing is caused by converting the absolute path into a relative path during packaging. To solve this problem, we can use absolute paths, configure agents, or use the vue-cli-plugin-apimock plug-in. Which method to choose depends on our actual situation and needs.

The above is the detailed content of What should I do if the interface path api is missing after vue is packaged?. For more information, please follow other related articles on the PHP Chinese website!