Analysis of the problem of deploying vue project and configuring proxy in Nginx

1. Install and start nginx

# Install nginx
sudo apt-get install nginx
# Start sudo service nginx start

Verify Installation

# After the installation is complete, use nginx -v to check. If the output of nginx version information indicates that the installation is successful nginx -v
# If the output is similar to this version number, the installation is complete nginx version: nginx/1.14.0 (Ubuntu)

2. Modify the nginx configuration file and deploy the project

Check the configuration of nginx. The configuration files under Linux system are usually stored in the nginx directory under the /etc directory.
The nginx configuration file is in the /etc/nginx folder, open the file /etc/nginx/sites-available/default
(nginx can have multiple configuration files, and we usually configure nginx by modifying this file)

Use the editor that comes with the connection tool to open or vim
Modify the following two places to successfully deploy the project

Check whether nginx configuration is correct

sudo nginx -t

Successful will appear.

nginx: configuration file /etc/nginx/nginx.conf test is successful

Load nginx configuration

sudo nginx -s reload

If the project is configured with cross-domain API, please continue to see point 3, otherwise just go to point 4 to access the project

3. Configure the proxy API

Generally, projects with separated front-end and back-end need to be cross-domain

Or edit the /etc/nginx/sites-available/default file

#The request address in the vue project needs to be preceded by api
#Proxy configuration for initiating requests, all addresses containing /api are replaced and forwarded to the address under proxy_pass location /api/ {
 		rewrite ^/b/(.*)$ /$1 break;
 		proxy_pass http://www.ifyyf.com/; 	
	}

As shown

You can proxy to the original cross-domain proxy of vue.config.js

4. Access the project

Open the server's ip or domain name to access the project

5. Secondary menu 404 problem

vim opens the default file

try_ files $uri $uri/ =404;

Modified to

try_ files $uri $uri/ /index.html;

This is the end of this article about deploying vue projects and configuring proxies on Nginx. For more information about deploying vue projects on Nginx, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!