vue项目去掉URL中的#

前言

最近，同事跟我说，项目的访问路径里的/#/挺不美观的，就下手尝试去掉，本以为就是一句代码搞定的事情，结果遇到不少问题。
 
现在把我遇到的情况记录下来，做个存档，如果看到文章的有缘人刚好遇到跟我一样的情况，我的内容能提供多一个解决方案也是不错的。

---

正常解决步骤

1. 设置路由mode

router的默认mode为hash模式，关于hash模式，官方文档这样描述：

它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有不好的影响。如果你担心这个问题，可以使用 HTML5 模式。
-- -- 《Vue Router官方文档》

而关于history模式，官方文档是这样说的：

当使用这种历史模式时，URL 会看起来很 "正常"，例如 https://example.com/user/id。漂亮!

这正符合我们的需求。于是在我们的项目中启动路由mode的history模式：

let Router = new VueRouter({
  mode: 'history',
  routes: [...]
  ...
  });

2. 配置服务端nginx

关于history模式，官方文档还提到：

不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。这就丑了。
 
不用担心：要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。漂亮依旧!

按步骤1修改完，部署到服务器之后，URL中的#确实没有了，但是当刷新页面，或者页面中有使用window.open打开的页面时，会出现404错误。
按官方文档的说明，需要配置服务器的回退路由，我们的环境是使用的nginx，使用以下配置解决了刷新404的问题

        location / {
                try_files $uri $uri/ @router;
                index  index.html index.htm app.html app.htm;
         }

        location @router {
                rewrite ^.*$ /index.html break;
        }

如果你的环境是apache或者其他服务器，可以参考官方文档进行配置

---

可能碰到的问题

1. 静态资源Uncaught SyntaxError: Unexpected token < 问题

我的项目中有用使用相对路径获取静态资源，例如 这种方式展示的图片，这时候这些图片都会抛出 Uncaught SyntaxError: Unexpected token < 404找不到资源的异常，这是由于启用history模式后相对路径造成的问题，将 vue.config.js 文件中 publicPath 或者 bashUrl 从./ 相对路径修改为 / 绝对路径即可

publicPath = '/';

我的项目环境中 http://localhost:8080/ 后没有需要添加固定的路径，如果你的有（比如 http://localhost:8080/domain/），需要按你的情况进行调整

2. api接口请求404问题

项目部署之后，我发现有些接口请求出现了404的情况，检查发现 api 的axios 配置时的路径配置存在相对路径的使用，需要进行修改
调整之前的配置:

export const exampleApi = (id) => {
  return request({
    url: 'xxx/xxx/' + id,
    method: 'get',
  })
}

配置修改为:

export const exampleApi = (id) => {
  return request({
    url: '/xxx/xxx/' + id,
    method: 'get',
  })
}

3. 开发环境（npm run dev启动）刷新404的问题

这个问题困扰我不少时间，网上也没有找到网友有类似的情况，最后发现是因为开发环境调试时，为了解决跨域问题，在项目中配置了 webpack devServer 的 proxy，代理处理了所有的请求，通过使用 bypass 绕过html，就可以解决此问题

# vue.config.js文件
devServer: {
    proxy: {
      '/': {
        target: url,
        ...
        bypass: function (req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        },
      },
  }
}

---

结尾

至此，我的项目终于在生产环境以及开发环境都运行正常了，撒花✿✿ヽ(°▽°)ノ✿