1. Introduction to nginx
1. What is Nginx?
Nginx is a powerful high-performance web and reverse proxy service
It is characterized by less memory and strong concurrency capability. In fact, the concurrency capability of nginx is better than other web servers of the same type. Users of nginx websites in mainland China include: Baidu, Jingdong, Sina, NetEase, Tencent, Taobao, etc.
2. The role of Nginx
Load balancing, static server, forward and reverse proxy
3. Download
URL: http://nginx.org/en/download.html
Mainline version with all functions (recommended)
Stable version Stable version
Legacy versions old version
4. Check whether it is successful
localhost default port 80
The welcome screen is successful
5. Deployment
After the build is complete, put the content of the dist file in http, and you can
6. Basic instructions
cmd to the nginx path
View the version: nginx.exe -V
Start: start nginx
View the startup log: tasklist /fi "imagename eq nginx.exe"
Quick shutdown: nginx.exe -s stop
Orderly shutdown: nginx.exe -s quit
View the shutdown log: taskkill /f /t /im nginx.exe
restart: nginx.exe -s reload
Check whether the port is occupied: netstat -ano | findstr "80"
Static resource storage: static -> location/
7. Advanced use
Multiple servers need to be configured in nginx: http://bugshouji.com/bbs-read-run?tid=1241
2. Vue project deployment process
Super detailed steps:
Please check the following link: http://bugshouji.com/bbs-read-run?tid=1523
3. Frequently asked questions about deployment
1. When using the history mode, the page displays a blank
solution: Put the contents of the dist folder into the nginx server and run it
2. After vue is packaged into dist, the proxy cross-domain setting is invalid.
Solution: use the nginx server to run, and configure the code in the configuration file of the nginx server. The configuration
code is as follows:
location /api/ {
proxy_pass http://172.16.8.9:8888/;
}
Note: 1. /api becomes /api/
2. Be sure to add / and a semicolon after the address set by proxy_pass
3. To solve the problem of displaying 404 when the subcomponent page is refreshed,
the configuration code is as follows:
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}