Vue项目配置到Nginx（服务器）

一、Nginx的安装

1、安装命令

sudo apt-get update				# 先更新一下资源``
sudo apt-get install nginx		# 安装nginx

2、查看Nginx的版本

ubuntu@VM-0-11-ubuntu:~$ nginx -v
nginx version: nginx/1.14.0 (Ubuntu)	# 说明Nginx安装成功
ubuntu@VM-0-11-ubuntu:~$ 

二、Nginx的配置

如果你不知道Nginx的配置目录的话看1、。

1、查看与Nginx相关的目录

whereis nginx 				# 显示所有匹配nginx的目录路径

nginx: 
/usr/sbin/nginx 			# nginx的程序目录（类似安装目录吧）
/usr/lib/nginx 				# 有lib，就知道是nginx的库
/etc/nginx 					# 配置文件目录
/usr/share/nginx 
/usr/share/man/man8/nginx.8.gz	# 应该是nginx的使用（man）手册目录

2、进入Nginx的配置目录

ubuntu@VM-0-11-ubuntu:~$ cd /etc/nginx/
ubuntu@VM-0-11-ubuntu:/etc/nginx$ ls
conf.d          koi-utf     modules-available  nginx.conf_backup  sites-available  uwsgi_params
fastcgi.conf    koi-win     modules-enabled    proxy_params       sites-enabled    vhosts.d
fastcgi_params  mime.types  nginx.conf         scgi_params        snippets         win-utf
ubuntu@VM-0-11-ubuntu:/etc/nginx$

我们可以看到 nginx.conf文件（将Vue配置到Nginx的文件）

3、为保证安全，先把nginx.conf文件备份一下

cp nginx.conf nginx.conf_backup

4、开始修改配置文件

sudo vi nginx.conf		# 内容如下

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    
    
        worker_connections 768;
}

http {
    
    
        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;
        
        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        gzip on;

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;

        server{
    
    
                listen       80;               # 你的服务的端口号
                server_name  localhost;
                root /var/www/dist;			   # 指定项目路径

                location / {
    
    
                        proxy_pass http://121.4.120.27:8081;
                }
                
                location @router {
    
    
                    rewrite ^.*$ /index.html break;                   # break参数不报错不改
                }

                error_page   500 502 503 504  /50x.html;
        }
}

4.1、注意事项

如上图，一开始的nginx.conf文件一般是没有server这一块的，是需要自己配置的（如果有那更好啦，会少敲很多代码）。而我们第一次配置Nginx服务器需要修改的地方，也就是server这一块了。接下来详细讲解怎么配置server。

5、各参数作用讲解

listen 参数

listen       80; 

这是你的服务的端口号，不用多说吧！我们常用的是8080，8081，8088等端口。

server_name 参数

server_name  localhost;

先写这么多吧，最近比较懒[捂脸]…