去掉 域名后面的 /#/ vue-router 和 hbuilder发布 web项目和h5项目

1. vue-router

vue-router默认的路由模式是hash，我们要去掉url中的#需要将路由模式切换为history

const router = new VueRouter({
　base: 'test', // 如果项目项目在 域名 根目录下，则去掉这行
  mode: 'history', // 路由模式
  ...
})

这样子，url中的#就可以去掉了，在开发环境下不会出问题，部署上线后点击正常，但是…你一旦手动点击浏览器的刷新按钮，页面显示nginx的404页面。

怎么解决呢？在vue-router官网有说明：这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。我们线上的服务器用的是nginx，需要改为下面的配置：

location ^~/test {
     alias   D:/project/card-web/code/dist/;
     try_files  $uri $uri/ @card;
 }
        
 location @card {
     rewrite ^/(test)/(.+)$ /$1/index.html last;
 }
      
 # 项目部署在服务器/下（访问地址：http://www.a.com）
 location / {
     root   D:/project/card-web/code/dist/;
     try_files $uri $uri/ /index.html;
 }

这样子，无论你怎么刷新页面都不会报404了。。。贼开心。。。如果你是用vue-cli创建的工程的话，你可能会在线上看到报错：所有的静态资源都返回的 index.html 文件 , css或者js请求失败

默认的静态资源生产环境构建配置应该为：

// config/index.js
build : {
    assetsPublicPath: "./"  
}

上述nginx配置的意思就是说以 test 开头的路径都会返回index.html，而我们构建时的静态资源还是相对位置（相对于index.html的位置），如果我们把静态资源都是设置为根路径（以 / 开头），浏览器会直接从域名根路径开始请求（相对于域名的位置），请求的静态资源路径nginx就能找到，就不用rewrite，

所以我们修改如下：

// config/index.js
build : {
    assetsPublicPath: "/test/", // 如果项目项目在 域名 根目录下，则为 "/"
}

总结：

请求静态资源nginx直接返回，www.baidu.com/test/a/b 等这种路径nginx统一返回 index.html

我们在工程引用静态资源（css或者图片）需要使用相对路径，如果在js中引用需要require（）引用

2. hbuilder ==》 发行 网站PC端 或手机H5端时

路由模式 默认选择 hash ， 改为 history 则去掉 域名后面的 /#/