linux下nginx部署vue

首先先打包
npm run build或者是cnpm run build
得到dist,把dist/index.html放进dist/static(这一步是为了简化访问路径,下面在详细解释)
安装nginx,centos和Ubuntu各自安装的nginx目录结构不一样.
ubuntu下sudo apt install nginx一键安装完成
centos下yum install nginx -y安装
ubuntu下nginx目录结构

centos下nginx目录结构如下

读者的跟我可能会不太一样,但是都差不多,下面是配置nginx
在centos下,修改/etc/nginx/conf.d/defalt.conf文件,在server里面添加

location /static {
					alias /home/static; 
}   

这里的/home/statics是我存放vue打包好的项目路径,也就是上面的刚开始的第一步.
ubuntu下也差不多,如果没有defalt.conf,可以自己新建一个,格式大概如下
下面的listen 80,可以改成其他的端口

server {
listen 80;
server_name projectname;
charset utf-8;

client_max_body_size 75M;

location /static {
	alias /home/static;
}
}

centos下也可以新建一个xxxx.conf文件,然后在/etc/nginx/nginx.conf里面的http{}include进来,也可以放进http本身的include /etc/nginx/conf.d/*.conf;目录下(建议大家还是新建一个文件,不容易冲突,但是要注意监听的端口)
在centos下注意防火墙开放端口的情况,

firewall-cmd --list-port

开放80端口

firewall-cmd --zone=public --add-port=80/tcp --permanent

重启systemctl stop firewalld.service
配置nginx的时候要注意里面的location 是固定好static的,这是因为vue项目引用是通过src=/static/js/***.js>这样引用的,因为我们又暴露出了/static,所以这样配置不用去修改vue项目的路径.
关于路径的问题,因为nginx默认的user是nginx,所以目录最好放在/home下,放在其他地方,nginx可能没有访问的权限而出现403,另外一种解决办法可以是直接修改nginx的user为root