vue 打包后出现 刷新出现404 nginx配置 路由配置

最近遇到打包发布到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
            }]
        },

    ]
})

其他地方使用的时候注意路径

    
            发布信息
    

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;
        }

你可能感兴趣的:(vue 打包后出现 刷新出现404 nginx配置 路由配置)