最近遇到打包发布到node之后,只有登录页面和首页刷新后不会出现404,二级页面刷新就变成空白
看了很多帖子发现解决方案都大同小异,检查了自己的router配置也没问题,排除了node配置和router配置之后,最后在第一个解决方案上成功刷新。因为本地测试的时候,不管什么页面,刷新都不会存在这种情况,所以没注意。所以记录一下这种情况。
检查vue代码
config/index.js
build: {
assetsPublicPath: '/',//这个地方有时候是"./",要改为"/"
}
检查vue代码
src/router/index.js
,根据实际开发的来配置路由
...
import Login from "../Login";
import Notfound from "../404";
...
const router = new Router({
mode: "history",
routes: [{
path: '*',
component: Notfound,
meta: {
title: '404未找到',
},
},
{
path: "/",
component: Login
}, {
path: "/login",
component: Login
},
{
path: "/admin",
component: AdminIndex,
meta: {
requiresAuth: true
},
children: [{
path: "",
component: Home
}, {
path: "usermanager",
component: UserManager
}, {
path: "adver",
component: Adver
}, {
path: "order",
component: Order
}, {
path: "customer",
component: Customer
}, {
path: "cash",
component: Cash
}, {
path: "appeal",
component: Appeal
}, {
path: "systemmanager",
component: System
}, {
path: "system/editeinfo",//下面会用到这个路径
component: AddInfodeital
}]
},
]
})
其他地方使用的时候注意路径
<router-link to="/admin/system/editeinfo">
<el-button type="primary" icon="el-icon-circle-plus-outline">发布信息</el-button>
</router-link>
node配置
有两种设置方法应该都差不多
在nginx\conf\nginx.conf
设置
//第一种方式
location / {
root F:/xxx/admin/dist;//这个是打包后的文件路径
try_files $uri $uri/ @router;
index index.html;
}
//第二种方式
location / {
root F:/xxx/admin/dist;
#try_files $uri $uri/ @router;
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
index index.html;
}