起因

因为测试环境的链接一般都是一个主链接后面加文件目录的形式来配置nginx。

例如：www.xxxx.com/admin 、www.xxx.com/clond …

admin和clond是不同的项目，只是通过nginx代理使用同一个域名下面。

所以我们如果在这种域名下面配置nginx，满足history模式的话，需要更改一些配置。

vue官方告诉我们配置方式是：

前端：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

nginx:

location / {
  try_files $uri $uri/ /index.html;
}

正常来说，如果是一个完整域名下面代理一个项目的话，这样配置是没有问题的。
但是如果出现上面那种情况，这种就不行了。

怎么做

前端：

const router = new VueRouter({
  mode: 'history',
  base:'/mobile/',
  routes: [...]
})

nginx:

location /mobile {
         alias /data/www/xxx/;   //  data/www/xxx/是你的入口index.html文件的目录。
         try_files  $uri /mobile/index.html;
        }