天天看點

部署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
           

繼續閱讀