Home Web Front-end Front-end Q&A How to configure proxy in Vue project

How to configure proxy in Vue project

Mar 31, 2023 pm 01:54 PM

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
        }
      }
    }
  }
}
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

React's Role in HTML: Enhancing User Experience React's Role in HTML: Enhancing User Experience Apr 09, 2025 am 12:11 AM

React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.

React Components: Creating Reusable Elements in HTML React Components: Creating Reusable Elements in HTML Apr 08, 2025 pm 05:53 PM

React components can be defined by functions or classes, encapsulating UI logic and accepting input data through props. 1) Define components: Use functions or classes to return React elements. 2) Rendering component: React calls render method or executes function component. 3) Multiplexing components: pass data through props to build a complex UI. The lifecycle approach of components allows logic to be executed at different stages, improving development efficiency and code maintainability.

What are the limitations of Vue 2's reactivity system with regard to array and object changes? What are the limitations of Vue 2's reactivity system with regard to array and object changes? Mar 25, 2025 pm 02:07 PM

Vue 2's reactivity system struggles with direct array index setting, length modification, and object property addition/deletion. Developers can use Vue's mutation methods and Vue.set() to ensure reactivity.

React and the Frontend: Building Interactive Experiences React and the Frontend: Building Interactive Experiences Apr 11, 2025 am 12:02 AM

React is the preferred tool for building interactive front-end experiences. 1) React simplifies UI development through componentization and virtual DOM. 2) Components are divided into function components and class components. Function components are simpler and class components provide more life cycle methods. 3) The working principle of React relies on virtual DOM and reconciliation algorithm to improve performance. 4) State management uses useState or this.state, and life cycle methods such as componentDidMount are used for specific logic. 5) Basic usage includes creating components and managing state, and advanced usage involves custom hooks and performance optimization. 6) Common errors include improper status updates and performance issues, debugging skills include using ReactDevTools and Excellent

What are the benefits of using TypeScript with React? What are the benefits of using TypeScript with React? Mar 27, 2025 pm 05:43 PM

TypeScript enhances React development by providing type safety, improving code quality, and offering better IDE support, thus reducing errors and improving maintainability.

How can you use useReducer for complex state management? How can you use useReducer for complex state management? Mar 26, 2025 pm 06:29 PM

The article explains using useReducer for complex state management in React, detailing its benefits over useState and how to integrate it with useEffect for side effects.

What are functional components in Vue.js? When are they useful? What are functional components in Vue.js? When are they useful? Mar 25, 2025 pm 01:54 PM

Functional components in Vue.js are stateless, lightweight, and lack lifecycle hooks, ideal for rendering pure data and optimizing performance. They differ from stateful components by not having state or reactivity, using render functions directly, a

How do you ensure that your React components are accessible? What tools can you use? How do you ensure that your React components are accessible? What tools can you use? Mar 27, 2025 pm 05:41 PM

The article discusses strategies and tools for ensuring React components are accessible, focusing on semantic HTML, ARIA attributes, keyboard navigation, and color contrast. It recommends using tools like eslint-plugin-jsx-a11y and axe-core for testi

See all articles