部署vue项目到线上nginx

部署vue项目到nginx

1.项目打包 打包完成以后就会在项目根目录生成一个dist的文件夹

npm run build

2.将打包以后的dist文件夹压缩为zip文件，然后ssh工具将dist.zip文件传输到服务器，传输成功以后将当前的dist.zip文件通过unzip dist.zip 解压 修改nginx.conf 文件

server {
     listen       80;
     server_name admin-aliy.wanm-mail.com;
     charset utf-8;
     location / {
	 root /usr/local/openresty/nginx/test/dist;#dist文件夹路劲
	 index /index.html;
	 try_files $uri $uri/ @router;
     } 
     location @router {
	rewrite ^.*$ /index.html last;
     }
}

注意：当出现Nginx 403 Forbidden的错误时，只需编辑nginx.conf 文件，在文件的第一行加入如下代码即可：

user  root;

.

重启nginx

./nginx -s reload