項目的大概情
vue項目（網(wǎng)站項目和網(wǎng)站的后臺管理項目）哥桥，同時部署在nginx的html文件下，后臺管理項目模塊要實現(xiàn)預覽功能狸捅，在本次開發(fā)完沒有問題衷蜓，部署在linu服務器上后，預覽頁面顯示404
文件位置
image.png
解決辦法
1.首先配置nginx的default.conf文件中添加后臺的location
location /admin {
alias /usr/share/nginx/html/admin/;
index index.html index.htm;
try_files $uri $uri/ /admin/index.html;
}
添加后default.conf文件
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html/;
index index.html index.htm;
}
location /admin {
alias /usr/share/nginx/html/admin/;
index index.html index.htm;
try_files $uri $uri/ /admin/index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
注意
1.新添加的location中文件路徑?jīng)]有用root而使用alias尘喝，使用alias后面的路徑一定要添加 "/"磁浇，root可有可無。
2.添加try_files $uri $uri/ /admin/index.html;代碼
新窗口預覽打開使用路由跳轉(zhuǎn)朽褪，vue router使用了history模式置吓，由于history模式的鏈接url是偽靜態(tài)，需要rewrite url規(guī)則來支持缔赠。按照vue-router官網(wǎng)的辦法
https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子衍锚，添加改固定代碼try_files $uri $uri/ /index.html，而我這邊的項目在admin文件下所以修改為index.html嗤堰。
