项目的大概情
vue项目（网站项目和网站的后台管理项目），同时部署在nginx的html文件下，后台管理项目模块要实现预览功能，在本次开发完没有问题，部署在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中文件路径没有用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。
