服务器 nginx 配置 vue-router history 模式

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;
    }
}

亲测可用

你可能感兴趣的:(Nginx,vue-router,hisotry)