vue-router默认路由模式为hash模式，该模式是使用 url 的 hash 来模拟一个完整的 url,url中会带一个#号，在某些情况下，我们需要用到history模式，因为我们是单页应用，在客户端加载页面后，其它url是不会从服务器加载页面。

但是，使用history模式，还需要后台服务端的支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 /article/86 时，服务端以为没有找到对应文件，就会返回 404 错误。

try_files 是实现 History 模式的关键配置。该指令作用是按指定的 file 顺序查找存在的文件，并使用第一个找到的文件进行请求处理。

try_files的语法

• 格式1：try_files file ... uri;
• 格式2：try_files file ... =code;
• 可应用的上下文：server，location段

关键点1：按指定的file顺序查找存在的文件，并使用第一个找到的文件进行请求处理

关键点2：查找路径是按照给定的root或alias为根路径来查找的

关键点3：如果给出的file都没有匹配到，则重新请求最后一个参数给定的uri，就是新的location匹配

关键点4：如果是格式2，如果最后一个参数是 = 404 ，若给出的file都没有匹配到，则最后返回404的响应码

location /images/ {
    root /opt/html/;
    try_files $uri $uri/ /images/default.gif; 
}

请求/images/test.gif会依次查找

1. 文件/opt/html/images/test.gif

2. 文件夹/opt/html/images/test.gif/下的index文件

3. 请求/opt/html/images/default.gif 注意事项： try-files 如果不写上$uri/，当直接访问一个目录路径时，并不会去匹配目录下的索引页
   即访问/images/不会去访问/images/index.html

项目使用根域名

nginx配置

server {
    listen       8080;
    server_name  localhost;

    location / {
        root   /data/html/test/dist;
        try_files $uri $uri/ /index.html;
        index  index.html;
        add_header Access-Control-Allow-Origin *;
    }
 
    #error_page  404              /404.html;

项目配置

vue 项目如下配置

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

项目使用二级路径

nginx配置

server {
    listen       8080;
    server_name  localhost;

    location /test {
        alias /data/html/test/dist;
        try_files $uri $uri/ /test/index.html;
        index  index.html;
        add_header Access-Control-Allow-Origin *;
    }
 
    #error_page  404              /404.html;

项目配置

vue 项目如下配置 路由

const router = new VueRouter({
  mode: 'history',
  base: '/test',
  routes
})

vue.config.js或者webpack.config.js配置

module.exports = {
   publicPath: '/test'
}

参考

• http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files