項(xiàng)目的大概情

vue項(xiàng)目（網(wǎng)站項(xiàng)目和網(wǎng)站的后臺(tái)管理項(xiàng)目），同時(shí)部署在nginx的html文件下，后臺(tái)管理項(xiàng)目模塊要實(shí)現(xiàn)預(yù)覽功能，在本次開發(fā)完沒有問題，部署在linu服務(wù)器上后，預(yù)覽頁面顯示404
文件位置

image.png

解決辦法

1.首先配置nginx的default.conf文件中添加后臺(tái)的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;代碼

新窗口預(yù)覽打開使用路由跳轉(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，而我這邊的項(xiàng)目在admin文件下所以修改為index.html。