Home > Article > Web Front-end > Two solutions to the 404 problem when refreshing the page in vue routing history mode
In vue hash mode, there is '#' in the URL. This problem can be solved by using 'history' mode. But in history mode, after refreshing the page, the page will appear 404. The solution is to configure it with nginx.
Modify in nginx configuration fileMethod one:
location /{
root /data/nginx/html;
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
}Method two:
vue.js official tutorial Mentioned https://router.vuejs.org/zh/g...
server {
listen 8081;#默认端口是80，如果端口没被占用可以不用修改
server_name myapp.com;
root D:/vue/my_app/dist;#vue项目的打包后的dist
location / {
try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
index index.html index.htm;
}
#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
#因此需要rewrite到index.html中，然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
#.......其他部分省略
}
The above is the detailed content of Two solutions to the 404 problem when refreshing the page in vue routing history mode. For more information, please follow other related articles on the PHP Chinese website!