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

Mysql 5.6 adds a method to modify username and password

Log in to MySQL first shell> mysql --user=root...

Analysis of the principle of Vue nextTick

Table of contents Event Loop miscroTask (microtas...

How to start tomcat using jsvc (run as a normal user)

Introduction to jsvc In production, Tomcat should...

Tutorial on deploying jdk and tomcat on centos7 without interface

1. Install xshell6 2. Create a server connection ...

Detailed tutorial on installing Python 3 virtual environment in Ubuntu 20.04

The following are all performed on my virtual mac...

Summary of MySQL logical backup and recovery testing

Table of contents 1. What kind of backup is a dat...

MySQL uses aggregate functions to query a single table

Aggregate functions Acts on a set of data and ret...

Sample code for a simple seamless scrolling carousel implemented with native Js

There are many loopholes in the simple seamless s...

A brief discussion on what situations in MySQL will cause index failure

Here are some tips from training institutions and...

Vue basic instructions example graphic explanation

Table of contents 1. v-on directive 1. Basic usag...

Understanding MySQL clustered indexes and how clustered indexes grow

In this note, we briefly describe What is the B+T...

VUE realizes registration and login effects

This article example shares the specific code of ...

JavaScript realizes magnifying glass special effects

The effect to be achieved: When the mouse is plac...

Nest.js hashing and encryption example detailed explanation

0x0 Introduction First of all, what is a hash alg...

How to Rename Multiple Files at Once in Linux

Preface In our daily work, we often need to renam...