Nginx部署Vue项目

1、安装Nginx

  • 我使用的是yum安装。(当然也可以自己下载手动安装)。输入命令查看yum上的nginx可用安装包

yum list | grep nginx
Nginx部署Vue项目_第1张图片

  • 安装nginx。yum -y install nginx
    Nginx部署Vue项目_第2张图片
    直到出现Complete!
  • 启动nginx systemctl start nginx
  • 查看nginx状态systemctl status nginx
    Nginx部署Vue项目_第3张图片
    正在运行。安装完成。

2、build Vue项目

  • 生成dist文件
    右键Vue项目→外部命令→npm run build→生成dist文件
  • 上传dist文件
    使用rz工具或者Xftp工具,将dist文件上传到Linux系统。文件位置根据自己需要。也可以自定义文件名。(例如 /home/project/test)

3、部署Vue项目

  • 首先,找到nginx的配置文件nginx.conf
    在启动nginx查看其状态时
    Nginx部署Vue项目_第4张图片
    我们可以看到配置文件的路径。
    当然我们也可以全局搜索find / -name nginx.conf
    在这里插入图片描述
  • 进入配置文件所在位置后打开配置文件 nginx.conf。为了简单操作,我直接使用xftp来操作了
    主要对server进行配置
server {
     
        listen       8806; 							#监听端口设置,也就是你vue项目的端口
        server_name  localhost;						

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        
        location / {
     
			root		/home/project/test;			#前端dist文件夹存放路径
   			try_files $uri $uri/ /index.html;		#解决页面刷新报404错误
        }


        location /prod-api/{
     						#匹配/prod-api/
			proxy_pass http://你的IP:你的端口/;		#跳转至后端的接口
        }

        error_page 404 /404.html;
            location = /40x.html {
     
        }

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

配置完成!启动nginx就可以访问了。

4、Linux系统安全策略配置

OK!小编以为已经搞定了!访问的时候,却报错了!
后来网上查阅资料,终于解决。解决方法如下:

  • 找到文件/etc/selinux/config
    Nginx部署Vue项目_第5张图片

  • 打开文件config
    Nginx部署Vue项目_第6张图片
    其中enforcing,permissive,disabled是Linux系统安全策略的三种模式。安全程度enforcing>permissive>disabled。小编没有做深入研究。。。

  • 修改配置文件

只要把SELINUX=enforcing改为SELINUX=permissive即可。(当然改成disabled更可以)

  • 重启系统。启动nginx。

发现此时项目可以正常访问了!

你可能感兴趣的:(Vue,Linux,vue,nginx,linux)