vue-router 有两种模式,一种是 hash 模式,这种模式一般在本地开发的时候会用到,这种模式下 url 地址栏上 端口号后边会出现 # 号,但是thisory 模式没有,一般线上的项目我们会用到history 模式。但是hisotry 模式打包放到服务器以后,刷新页面会出现 404 。
我服务器是使用的nginx 做的服务器和反向代理。这里记录下 nginx 配置 history 模式的方案
nginx 原配置
location / {
root /home/testhadoop/www/html;
index index.html index.htm;
}
解决方案如下
方案一:
使用try_files
语法:try_files file1 [file2 … filen] fallback
location / {
root /home/testhadoop/www/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
方案二
使用try_files
location /{
root /home/testhadoop/www/html;
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
}
亲测可用