One trick to solve the Vue multi-page routing history mode [development to deployment]

Open multi-page mode

module.exports = {
   pages: {},
}

official document-multi-page configuration

Routing mode

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

official document-vue-Router base

Development model

vue.config.js

Add the following configuration

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

Online nginx mode

Package directory

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

If your project is a second-level catalog, you need to configure it like this, compare different stores

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

Explanation

about alias can be this article

$uri is a variable of nginx, which stores the address accessed by the user, for example: http://xxx.com/sysadmin/sysadmin.html, $uri is sysadmin.html

$uri/ means that you are accessing a directory, for example: http://xxx.com/sysadmin/requirelist/, then $uri/ is /sysadmin/requirelist/

The meaning of try_files in nginx: try_files will try to read the files accessed by the user in the website directory, if the first variable exists, it will return directly; if it does not exist, continue to read the second variable, if it exists, return directly; if it does not exist, directly return Jump to the third parameter.