nginx vue 刷新 500 internal server error nginx vue 403

准备好前端dist文件  保证dist/index.html 点击在本地可以访问，

一，nginx安装

第一步，更新源列表

apt-get update

第二步，安装nginx

apt-get install nginx

第三步，检查nginx是否安装成功。如果出现版本号说明安装成功。

nginx -v

二、nginx的配置文件

nginx的配置文件和静态资源文件分布在不同的地方，这里需要注意。

• /usr/sbin/nginx：主程序
• /etc/nginx：存放配置文件(nginx.conf)
• /usr/share/nginx：存放静态文件
• /var/log/nginx：存放日志

三、配置nginx

现在要修改配置文件，在 /etc/nginx目录下有个 nginx.conf，我们需要修改的就是这个文件。在修改文件之前，我们需要做一些准备工作。

1、配置监听端口号、访问IP、代理跨域

nginx.conf配置文件中并没有 配置端口号和IP，这个我们需要自己手动添加，为了便于修改，我们将vue项目的配置放在其他地方文件里，在nginx.conf 只需要将vue项目的配置文件所在路径引入即可。

我打算把vue项目的配置文件放在 /etc/nginx/hosts 目录下。第一步，新建host目录

    cd /etc/nginx    #切换到/etc/nginx路径下
    mkdir hosts      #新建目录host

第二步，新建 server0.host 文件。名字和后缀可以自己命名。这个文件就可以保存当前vue项目的相关配置。

touch server0.host

第三步，加入端口号和IP相关配置，然后将下面提供的配置模板拷贝进去

vim server0.host    #编辑server0.host

server {
        listen       8080;                   #自己设置端口号
        server_name  xxx.xxx.xxx.xxx;        #自己设置ip地址
        #access_log  logs/host.access.log  main;
        location / {
            root   /usr/share/nginx/dist;        #这里写vue项目打包好的dist文件的地址
            index  index.html;               #这里是vue项目的首页，需要保证dist中有index.html文件
            try_files $uri $uri/ @router;
        }
 
        location @router {
			rewrite ^.*$ /index.html last;            //解决重新刷新页面，页面空白的问题
		}
        
        location /api/ {
            proxy_pass http://xxx.xxx.xxx.xxx:9090/;    //9090是后端端口
        }
        error_page   500 502 503 504  /50x.html;#错误页面
}

2、引入vue项目配置文件的路径

准备工作做好以后，下面就需要在nginx的配置文件中引入 vue配置文件的路径，vue配置文件的路径设置的是 /etc/nginx/hosts/server0.host

cd /etc/nginx
vim nginx.conf    #编辑nginx配置文件

 我们只需要在nginx配置文件加入一行即可

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


events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

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

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
	include /etc/nginx/hosts/*.host;  #此处加入
}


#mail {
#	# See sample authentication script at:
#	# http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
#	# auth_http localhost/auth.php;
#	# pop3_capabilities "TOP" "USER";
#	# imap_capabilities "IMAP4rev1" "UIDPLUS";
#
#	server {
#		listen     localhost:110;
#		protocol   pop3;
#		proxy      on;
#	}
#
#	server {
#		listen     localhost:143;
#		protocol   imap;
#		proxy      on;
#	}
#}

五、启动nginx

启动nginx

systemctl start nginx

停止nginx

systemctl stop nginx

重启nginx

systemctl reload nginx

查看nginx的启停状态（如果正常启动，会看到绿色的Running）

systemctl status nginx

出现报错

Job for nginx.service failed because the control process exited with 
error code. See "systemctl status nginx.service" and "journalctl -xe" 
for details.

[root@localhost /]# nginx -t -c /etc/nginx/nginx.conf

 如果配置文件有错误，修改配置文件后，先执行 nginx -t 命令检查配置文件无错误后，再执行nginx -s reload 重新加载配置文件命令。我出现的问题是主要是删除红框里面，后续按照需要来进行配置后台地址

 出现发布后403问题，保证dist的权限是最大的

chmod -R 777 dist 

 最中效果，访问

http://192.168.144.129:8080/#/login