使用vue-router的history模式遇到的一些问题

[funnycoderstar]

使用vue-router的history模式遇到的一些问题

1.hash和history的区别

hash模式就是 带有 # 值, #后面的路径服务器端并不会收到, 因为这是前端路由, a.com/#/about, 后端收到的只是a.com/
history模式就是没有#值, history模式下url都是路径的一部分, a.com/about, 后端收到的就是a.com/about

2.如何在服务器上配置(以nginx为例)

为什么需要在服务端配置呢?

举例说明:
单页应用的入口是index.html, 对应a.com
点击页面的某个按钮跳转到about页面, 对应a.com/about这个路由
单纯只跳转页面而不刷新, 因为不会重新请求后端, 不会出现任何问题, 但是我在 a.com/about这个路由对应的页面下刷新页面, 页面会报404, 因为刷新页面会重新请求服务器上的资源, 而在服务器上找不到 a.com/about对应的资源, 所以会报404, 找不到该资源

配置什么呢?

我们需要在服务器上配置, a.com/xxx 资源都重定向到index.html页面(即单页应用的入口), 就是斜杠后面所有的资源都重定向到首页;

webpack中的devServer.historyApiFallback选项就可以配置history模式下页面都指向哪些页面, 使用webpack在本地起的服务可以考虑使用, 具体怎么用如何用还要看具体需求如何

在nginx配置

遇到的一些问题:

1. 路由匹配不上
   表现形式是打开页面只显示app.vue中的内容, 如果app.vue中的内容只有 <router-view></router-view> 而没有其他内容时,打开页面为空白(建议一定要在路由中加一个404的路由配置, 不然页面空白, 没有任何报错, 一开始遇到可能得排查一下才能定位到是路由没有匹配上)
   原因是: History模式path取的是域名后面的完整路径, a.com/m/, router中的path取的是/m/, 和在routes配置的 path: '/'对应不上
   解决方案, history模式下对path进行处理

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/tickets-info',
        name: 'tickets-info',
        component: TicketsInfo
    },
    ...
];

// 处理history模式下的地址正常
function dealRoutes (arr) {
    for (let i = 0; i < arr.length; i++) {
        const fullPath = window.location.pathname + arr[i].path.replace(/\//, '');
        arr[i].path = fullPath;
    }
    return arr;
}
export default new Router({
    mode: process.env.NODE_ENV === 'development' ? 'hash' : 'history',
    routes: process.env.NODE_ENV === 'development' ? routes : dealRoutes(routes)
});

2. Nginx配置的常见问题
   nginx: [emerg] "proxy_pass" cannot have URI part in location given by regular expression, or inside named location, or inside "if" statement, or inside "limit_except" block in /Users/wangyaxing/homebrew/etc/nginx/nginx.conf:223

采用 Rewrite + proxy_pass的方式解决
proxy_pass只转发路由, Rewrite去处理后面具体的路径

最终配置

本地配置

server {
    listen 80;
    server_name b.com;
    location / {
        try_files $uri $uri/ /pc.html;
        alias /Users/wangyaxing/test/dist/;
        index pc.html;
    }
}

try_files的含义是 尝试去匹配文件 $uri $uri/, 如果 匹配不上, 则走最后配置的匹配规则

使用proxy_pass + rewrite 配置

server {
    listen 80;
    server_name b.com;
    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        rewrite ^(.*) /app/test/pc.html break;
        proxy_pass https://a.com;
    }
    location /m/ {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        rewrite ^(.*) /app/test/m.html break;
        proxy_pass https://a.com
    }
}