Recently, I used Vue CLI version 3.0 in my project. The project needs to set up a reverse proxy to solve cross-domain problems. Let’s record the setup process below.
How to install vue-cli3?
First, you need to have a nodejs environment
Node version requirements
Vue CLI requires version 8.9 or higher (8.11.0+ recommended). You can use nvm or nvm-windows to manage multiple Node versions on the same computer.
Secondly, if you installed the old version of vue-cli before, then you need to do the following
About the old version
The package name of the Vue CLI has been changed from vue-cli to @vue/cli. If you have installed an older version of vue-cli (or ) globally, you need to uninstall it first via npm uninstall vue-cli -g or yarn global remove vue-cli .
Assuming you already have a nodejs environment, you can install the vue-cli3 package through the following command
npm install -g @vue/cli # OR yarn global add @vue/cli
After installation, you can access the vue command from the command line. You can verify that it was installed successfully by simply running vue to see if it showed a help message for all available commands. (for example, vue --version)
Create a new configuration file
Create a new file in the root directory of the project. Starting from Vue CLI 3, all configuration information in the project is written in this file (2 is configured in the config directory).
Configure reverse proxy
Set up a proxy
= {
devServer: {
// Set up a proxy proxy: {
"/v1": {
target: "http://127.0.0.1:8081/", // Domain name ws: true, // Whether to enable websockets changOrigin: true, //Open the proxy: a virtual server will be created locally, and then the requested data will be sent and the requested data will be received at the same time. In this way, there will be no cross-domain problems when the data interaction between the server and the server will not have any cross-domain problems. pathRequiresRewrite: {
"^/v1": "/"
}
}
}
}
};
Use in request
// '/v1' equals 'http://127.0.0.1:8081/v1'// The request address is 'http://127.0.0.1:8081/v1/picture?method=upload'get('/v1/picture?method=upload')
More
For more information, please refer to the official Vue CLI document/zh/config/#devserver-proxy
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.