在nginx上部署vue项目(history模式);

vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式。比如如下网址:
使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:
http://localhost:8080/bank/page/count 这样的了;

不过history的这种模式需要后台配置支持。比如:
当我们进行项目的主页的时候,一切正常,可以访问,但是当我们刷新页面或者直接访问路径的时候就会返回404,那是因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404,怎么解决呢?我们现在可以把所有请求都转发到 http://localhost:8080/bank/page/index.html上就可以了。

所以我们需要使用nginx的try_files,去查找index.html.

nginx配置:

location / {
    add_header Cache-Control no-store;
    add_header Pragma no-cache;
    add_header Expires 0;
    root /home/test/;
    try_files $uri $uri/ @router;
    autoindex on;
  }

try_files $uri $uri/ @router;

$uri 这个是nginx的变量,代表用户访问的单个文件地址。
比如:http://test.com/index.html, 那么$uri就是 /index.html。
$uri/ 这个代表用户访问的文件目录。
比如:http://test.com/index.html, 那么$uri就是 /index.html。

所以try_files $uri $uri/的意思就是,比如http://test.com/example先去查找单个文件example,如果example不存在,则去查找同名的文件目录/example/,如果再不存在,将进行重定向@router

配置示例:

  location / {
    root /opt/data/nginx/html/pc/;
    index index.php index.html index.htm;
    try_files $uri $uri/ /index.html;
    error_page 404 /index.html;
  }

凡是404的路由,都会被重定向到index.html,这样就显示正确了

Logo

前往低代码交流专区

更多推荐