How to configure proxy in Vue project
Preface
In front-end development, we often encounter situations where we need to obtain data by requesting the server. However, when we are doing local development, the server is often not built yet. At this time, we certainly cannot sit still and wait. At this time, we need to build a fake interface locally to simulate the return of server data.
In the Vue project, we can configure a proxy through the vue.config.js file and develop the backend interface locally, which greatly improves development efficiency. This article will introduce in detail how to configure the proxy in the Vue project and implement interface fake data.
Text
The proxy configuration in the Vue project needs to be done in the vue.config.js file. If the project is built with vue-cli3.x, first confirm whether the vue.config.js file exists in the project root directory. If there is no such file, you need to manually create this file in the project root directory. At this time, we can copy the configuration template of vue.config.js officially provided by vue-cli:
module.exports = { devServer: { port: 8080, proxy: { '/api': { target: 'http://localhost:3000', // 服务器地址 changeOrigin: true, pathRewrite: { '/api': '' // 重写路径,例如接口地址是 /api/user,重写成 /user } } } } }
In the above code, our agent is configured in the devServer option. Among them, port is used to specify the port number of the development server; proxy is used to configure the proxy, which is an object type. The key value is used to match the interface that requires a proxy, and the value value is the configuration item of the proxy.
The configuration items in the proxy object are introduced below:
- target: server address. Indicates the address of the target server that needs to be proxied, which can be an IP address or a domain name. It is usually specified through http(s)://. For example, http://localhost:3000 is the address of the target server.
- changeOrigin: Whether it is cross-domain. In development mode, we should set it to true. The default is false, which means that after receiving the request, the origin field of the URL will be directly replaced with the proxy address. For example, the url requested by the front end through ajax is http://localhost:8080/api/list. If the target is set to http://localhost:3000, then when changeOrigin is set to true, the actual request url sent will become http://localhost:3000/api/list .
- pathRewrite: Path rewrite. For some interface addresses that contain prefixes such as /api, /web, etc., these prefixes need to be rewritten. For example, if the requested URL is /api/user, when rewriting the path, you need to remove the /api prefix and rewrite it as /user.
It should be noted that in the development environment, The Vue project's proxy only takes effect on the development server. In a production environment, you may need to convert the proxy configured in devServer to a reverse proxy solution such as Nginx.
Summary
In Vue project development, the agent is a very practical tool. Through the proxy, we can forward calls to the backend interface to local mock data and handle cross-domain issues gracefully. This article introduces how to configure the proxy in the Vue project to perform front-end development more efficiently. Using the proxy in development can speed up our development and improve the development experience.
The above is the detailed content of How to configure proxy in Vue project. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The article discusses useEffect in React, a hook for managing side effects like data fetching and DOM manipulation in functional components. It explains usage, common side effects, and cleanup to prevent issues like memory leaks.

Lazy loading delays loading of content until needed, improving web performance and user experience by reducing initial load times and server load.

Higher-order functions in JavaScript enhance code conciseness, reusability, modularity, and performance through abstraction, common patterns, and optimization techniques.

The article discusses currying in JavaScript, a technique transforming multi-argument functions into single-argument function sequences. It explores currying's implementation, benefits like partial application, and practical uses, enhancing code read

The article explains React's reconciliation algorithm, which efficiently updates the DOM by comparing Virtual DOM trees. It discusses performance benefits, optimization techniques, and impacts on user experience.Character count: 159

Article discusses preventing default behavior in event handlers using preventDefault() method, its benefits like enhanced user experience, and potential issues like accessibility concerns.

The article explains useContext in React, which simplifies state management by avoiding prop drilling. It discusses benefits like centralized state and performance improvements through reduced re-renders.

The article discusses the advantages and disadvantages of controlled and uncontrolled components in React, focusing on aspects like predictability, performance, and use cases. It advises on factors to consider when choosing between them.
