【Laravel+vue实现history模式url】

写在前面

项目环境：针对不同的项目配置可能不同，项目实用的是Laravel8+vue2，前端框架使用vue-element-admin

最终实现：优化官网路由

原路由：http://127.0.0.1/#/dashboard
优化后：http://127.0.0.1/dashborad

遇到的问题回顾

1.仅修改前端vue代码,设置为模式history后，访问页面接口总是提示404；¹
2.每次刷新页面，提示404。²

知识背景：vue-router的hash模式和history模式

1.hash模式：vue是单页面应用，利用锚点“#”实现路由。
路由的哈希模式是利用了window.onhashchange事件，也就是哈希值（#后面的值）如果有编号，就会自动调用hashchange的监听事件，在hashchange的监听事件内可以得到改变后的url，这样能够找到对应页面进行加载。
2.history模式：去掉“#”号。
每个window窗口都有自己的history，为了安全起见history不会暴露访问过的url，但是可以通过api进行前进或后退访问url的内容。
window.history.pushState(data, title, targetURL);
window.history.replaceState(data, title, targetURL);

1、前端配置

// 文件路径
// resources/src/router/index.js

const createRouter = () => new Router({
    mode: 'history', // require service support   // 设置模式为history
    base: process.env.VUE_APP_BASE_API,
    scrollBehavior: () => ({y: 0}),
    routes: constantRoutes
})

2、服务器配置

server {
        listen       80;
        server_name  local.fumenhu.cn;
        root C:/webapp/ftshop/api/public;
        access_log C:/Visual-NMP-x64/logs/Nginx/fttg-access.log;
        error_log C:/Visual-NMP-x64/logs/Nginx/fttg-error.log;

        add_header X-Frame-Options "SAMEORIGIN";
        add_header X-XSS-Protection "1; mode=block";
        add_header X-Content-Type-Options "nosniff";
        add_header Access-Control-Allow-Origin '*';
        add_header Access-Control-Allow-Headers "*";

        index index.html index.htm index.php;

        charset utf-8;
        location / {
                try_files $uri $uri/ /index.php?$query_string; // 设置路由
        }
        error_page 404 /index.php;
        location ~ \.php$ {
                #fastcgi_split_path_info ^(.+\.php)(/.+)$;
                #fastcgi_param  SERVER_SOFTWARE    nginx;
                #fastcgi_hide_header X-Powered-By;
                fastcgi_pass   127.0.0.1:8001;
                #proxy_set_header    X-Real-IP   $remote_addr;
                #fastcgi_index  index.php;
                #fastcgi_param  SCRIPT_FILENAME  $root$fastcgi_script_name;
                fastcgi_param  SCRIPT_FILENAME  $realpath_root$fastcgi_script_name;
                include        fastcgi_params;
        }
        location ~ /\.(?!well-known).* {
                deny all;
        }
}

3、刷新页面404问题

if ($e instanceof NotFoundHttpException) {
     if($e->getStatusCode() == 404){
         return response()->view('index');
     }
 }

总结

相比于hash，history虽然可以实现正常美观的地址显示，但是代价就是需要解决刷新时请求服务器的404的问题。

---

1. 配置好后，解决了遇到的第一个问题，后端接口访问路径得到优化。 ↩︎

2. 此处解决了第二个问题。
   刷新会重新请求服务器，然而在实际应用中，vue中的路由地址并没有在服务器上有对应的后端处理，它仅仅用于前端的路由切换。
   这就需要服务器端做点手脚，将不存在的路径请求重定向到入口文件（index.html） ↩︎