vue 路由的URL有两种模式,一种是 hash,一种是history ,history 模式更好看一些。
在使用hisory模式时,由于地址并不是真实存在,那么在刷新的情况下,这个会报404错误。
对于这个问题,我们只需要在服务器配置如果URL匹配不到任何静态资源,就跳转到默认的index.html。
我这里是针对nginx的配置,总结如下:
server {
listen 8001; ##表示的项目所占用的端口
server_name localhost;
location / {
root C:\project\lichunhua; #表示你的项目文件所处于的位置,在windows下面表示的是与conf目录处于同一级
try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
index index.html index.htm;
}
#对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
#因此需要rewrite到index.html中,然后交给路由在处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
#error_page 500 502 503 504 /50x.html; 这里是对500异常的重定位,我们一般不需要
#location = /50x.html {
# root html;
#}
}