nginx部署vue项目，新窗口页面报错404（避免入坑）


项目的大概情

vue项目（网站项目和网站的后台管理项目），同时部署在nginx的html文件下，后台管理项目模块要实现预览功能，在本次开发完没有问题，部署在linu服务器上后，预览页面显示404
文件位置

image.png

解决办法

1.首先配置nginx的default.conf文件中添加后台的location

1
2
3
4
5
location /admin {
        alias   /usr/share/nginx/html/admin/;
        index  index.html index.htm;
        try_files $uri $uri/ /admin/index.html;
 }

添加后default.conf文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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中文件路径没有用root而使用alias，使用alias后面的路径一定要添加 "/"，root可有可无。
2.添加try_files $uri $uri/ /admin/index.html;代码

新窗口预览打开使用路由跳转，vue router使用了history模式，由于history模式的链接url是伪静态，需要rewrite url规则来支持。按照vue-router官网的办法
https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子，添加改固定代码try_files $uri $uri/ /index.html，而我这边的项目在admin文件下所以修改为index.html。