一招解决Vue多页面路由history模式【开发到部署】

开启多页面模式

module.exports = {
   pages: {},
}

官方文档-多页面配置

路由模式

const mainRoutes = [
    {
        path: "/",
        name: "main",
        component: Layout,
        redirect: "/home",
        children: [
            {
                path: "/home",
                name: "home",
                component: () => import("@/html/sysadmin/views/home/home"),
                meta: {
                    title: "home",
                },
            },
        ],
    },
];

const router = new Router({
    mode: "history", // 配置history模式
    base: "/sysadmin", // 取个应用路径名字
    routes: mainRoutes,
});

官方文档-vue-Router base

开发模式

vue.config.js

添加以下配置

publicPath:'/', // 注意publicPath的路径是斜杠
configureWebpack: {
        devServer: {
            historyApiFallback: {
                verbose: true,
                rewrites: [
                    { from: /^\/index\/.*$/, to: "/index.html" }, 
                    { from: /^\/sysadmin\/.*$/, to: "/sysadmin.html" }
                ],
            },
        },
    },

线上nginx模式

打包目录

配置nginx

server {
        listen       9041;
        server_name  pb5;
        client_max_body_size 500m;

        location / {
            root   /usr/local/dist;
            index  index.html index.htm;
        }
        
        location ^~ /api { # api接口代理
            rewrite  ^/api/(.*)$ /$1 break;
            proxy_set_header Host $host:9041;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_pass http://192.168.10.38:8080; # 内网IP
            
        }
        
        # 注意nginx的执行顺序是先匹配的 /sysadmin的 ，然后再匹配 /
        
        location /sysadmin { # 这里的配置就是相当于配置了个路径，然后nginx做了一层拦截
             root   /usr/local/dist;
             index sysadmin.html;
             try_files $uri $uri/ /sysadmin.html;
        }
    }

如果你的项目是二级目录,需要这样配置，对比看下不同店

location / { # 根目录
            root   /usr/local/dist;
            index  index.html index.htm;
        }
location  ^~/sysadmin{
        roxy_redirect  off; # 如果是域名需要打开，ip不需要
        alias   /usr/local/dist/sysadmin; # 二级目录 
        index  index.html index.htm;    
        try_files $uri $uri/ /sysadmin/index.html;            
}

解释

关于alias可以这篇文章

$uri 这个是nginx的一个变量，存放着用户访问的地址,比如：http://xxx.com/sysadmin/sysadmin.html，$uri就是sysadmin.html

$uri/ 代表访问的是一个目录，比如：http://xxx.com/sysadmin/requirelist/ ，那么 $uri/ 就是 /sysadmin/requirelist/

nginx中try_files的含义：try_files 会去尝试到网站目录读取用户访问的文件，如果第一个变量存在，就直接返回；不存在继续读取第二个变量，如果存在，直接返回；不存在直接跳转到第三个参数上。