Vue Router 模式及其部署

发表于 分类于 阅读次数：

Vue Router是Vue.js官方的路由管理器，使用配置很简单：

1
2
3
4
5
6
7
8
9
10
//  router/index.js
// 此处省略一堆 import
const router = new Router({
    base:'/',
    mode:'history', //default-->hash
    routes:[],
    scrollBehavior:()=>{
        return {x:0,y:0}
    }
})

base

浏览器url的前缀，默认为'/'，如果设置为'/admin/',则运行项目，浏览器url都是'/admin/...',不会对静态文件的引用产生影响，一般写网站都会有域名，都可以把域名指向某个服务器目录，所以默认'/'即可。

比如打包后的文件在111.22.33.44/admin，是在项目部署的子级目录，这个时候路由的配置匹配浏览器路径的时候，会从这个/admin开始算，如果base还是默认的/，那么路由配置的routes的path就要全部加上/admin/前缀，并且router-link和push方法也要加上这个/admin，很麻烦，但是只要设置base为'/admin/'，路由内部配置以及所有相关的方法都可以忽视服务器ip下的目录名。
这种情况，同样也要配置webpack的publicPath也为/admin/，这个下面细说。

mode

  • hash: 使用URL的hash值来作为路由。支持所有浏览器。浏览器会有‘#’符号，参考锚点效果，缺点很丑，但是兼容性棒棒。
  • history: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式。去除‘#’符号，让url变好看，下面会讲服务端配置。
  • abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式，例如weex。

history模式nginx配置

hisroty模式下需要配置的原因：
　　当你进入某个路由之后，再次刷新页面时（或者是浏览器直接输入某个路由路径时），浏览器就会重新dns解析，tcp协议，这个时候会根据浏览器的url去服务器找对应资源，当然我们vue-router是为单页面服务的，对应的url在服务端是肯定没有静态资源的，就会出现404；
　　当配置了以下url重写语句，注意是重写，不是重定向，不改变url的情况重写浏览器内容，重写到index.html，因为这个index.html使我们项目的入口，index.html里面会读取当时打包好的app.js，就可以读取到路由配置，以实现我们浏览器的url对应的路由页面。

hash模式不需要配置，因为浏览器会忽略 # 和 ？后面的参数

  1. 打包文件在根目录时：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    server {
      listen  80;
      server_name  test.com;

      location / {
        root  /var/www/dist;  ## 前端文件路径
        index  index.html;  ## hash模式只配置访问html就可以了
        try_files $uri $uri/ /index.html;  ## history模式下
      }
    }

  2. 打包文件在非根目录，即部署到子级目录时，还需要修改webpack的publicPath，生成一个子级目录下的绝对访问路劲，同时修改nginx相应的.conf文件：

webpack：

1
publicPath: process.env.NODE_ENV === 'production' ? '/admin/' : '/',

nginx：

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
  listen  80;
  server_name  test.com;

  location /admin {     ## 子级目录，打包的代码放在子级目录
    alias  /var/www/dist/admin;
    index  index.html;
    try_files $uri $uri/ /admin/index.html; 
    expires 30d;  ##缓存30天，这个缓存是指你浏览器（客户端，非nginx）缓存，一般情况下，Ctrl+R强制刷新就会去掉缓存


  }
}

try_files指令：
语法：try_files file … uri 或 try_files file … = code
默认值：无
作用域：server location
其作用是按顺序检查文件是否存在，返回第一个找到的文件或文件夹(结尾加斜线表示为文件夹)，如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。
需要注意的是，只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部URI的指向。最后一个参数是回退URI且必须存在，否则会出现内部500错误。命名的location也可以使用在最后一个参数中。
与rewrite指令不同，如果回退URI不是命名的location，那么$args不会自动保留，如果你想保留$args，则必须明确声明。