vue-route webpack 部署单页路由项目 访问刷新出现404问题

vue-route + webpack 部署单页路由项目,访问刷新出现404问题

问题描述

前端使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,在 npm run dev 命令中,页面访问正常,F5刷新也正常显示页面. npm run build 后部署到linux系统中,用nginx为web服务器. 部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所有的二级页面打开后,再次刷新,就会出现404现象!如下:

vue-nginx正常访问

vue-nginx出现404

问题原因

刷新页面时访问的资源在服务端找不到,因为vue-router设置的路径不是真实存在的路径.
如上的404现象,是因为在 nginx 配置的根目录 /var/local/vue/dist/ 下面压根没有 /funcset/products 这个真实资源存在,这些访问资源都是在js里渲染的。

原 nginx.conf 的配置信息为:

1
2
3
4
5
6
7
8
server {
listen 8088;
server_name localhost;
location / {
root /var/local/vue/dist/;
index index.html index.htm;
}
}

问题解决

在nginx配置里添加vue-route的跳转设置(这里首页是index.html),正确配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
server {
listen 8088;
server_name localhost;
location / {
root /var/local/vue/dist/;
index index.html index.htm;
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}
}

重启nginx后,问题就迎刃而解了.

坚持原创技术分享,您的支持将鼓励我继续创作!