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

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

insert image description here

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

insert image description here

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!

You may also be interested in:
  • How does Vue get the API address value in the configuration proxy file
  • How to solve cross-domain problem in Vue server proxyTable configuration
  • Vue project configuration cross-domain access and proxy setting method
  • How to configure reverse proxy in VueCli4 project
  • Vue cli3 configures proxy proxy invalid solution
  • Detailed explanation of Vue multi-environment proxy configuration method
  • Vue configuration proxy details

<<:  HTML text box (text) is not available in multiple ways to achieve read-only

>>:  Detailed explanation of how to use JS to achieve the effect of PS eraser scratch card in canvas

Recommend

Analysis of the Poor Performance Caused by Large Offset of LIMIT in MySQL Query

Preface We all know that MySQL query uses the sel...

mysql method to recursively search for all child nodes of a menu node

background There is a requirement in the project ...

Detailed explanation of the installation steps of the MySQL decompressed version

1. Go to the official website: D:\mysql-5.7.21-wi...

MySQL big data query optimization experience sharing (recommended)

Serious MySQL optimization! If the amount of MySQ...

How to completely delete the MySQL 8.0 service under Linux

Before reading this article, it is best to have a...

MYSQL uses Union to merge the data of two tables and display them

Using the UNION Operator union : Used to connect ...

MySQL transaction control flow and ACID characteristics

Table of contents 1. ACID Characteristics Transac...

Implementation of mysql backup strategy (full backup + incremental backup)

Table of contents Design scenario Technical Point...

Detailed process of NTP server configuration under Linux

Table of contents 1. Environment Configuration 1....

Centos8.3, docker deployment springboot project actual case analysis

introduction Currently, k8s is very popular, and ...

Simple usage example of MySQL 8.0 recursive query

Preface This article uses the new features of MyS...

Analysis of MySQL's method of exporting to Excel

This article describes how to use MySQL to export...

How to package the uniapp project as a desktop application

Installing Electron cnpm install electron -g Inst...

How to implement a lucky wheel game in WeChat applet

I mainly introduce how to develop a lucky wheel g...