vue项目如何去掉URL中#符号的方法

　　你们是否想过如何优化访问路径里的/#/，看起来有简单又美观，现在我们一起看看实现。现在就为大家展示解决方法。

　　正常解决步骤

　　1. 设置路由mode

　　先说下router的默认mode为hash模式，有关于hash模式介绍如下：

　　hash并不能作为传递，也无法将URL发送到服务器中，因此，无法到服务器中进行处理。而且它对于SEO优化也有不好的影响。我们可以换换想法，用可以使用 HTML5 模式。

　　– -- 《Vue Router官方文档》

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

　　现在我就看看这种模式下的URL，怎么样， 看起来很 “正常”，例如 https://example.com/user/id。漂亮!

　　对于我们的需求也十分满足。于是在我们的项目中启动路由mode的history模式：

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

　　2. 配置服务端nginx

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

     其中要有一个问题要我们解决，就是应用是一个单页的客户端应用，假如在没有适当的服务器配置情况下，访客直接在浏览器中输入网址，出现的就会是404页面。

　　解决：其实我们只要在所属服务器上添加一个简单的回退路由。当在你的 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。

　　即使完成上述步骤，还是没有彻底解决问题，因此，我们还需要后续。按官方文档的说明，需要配置服务器的回退路由，我们的环境是使用的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 < 问题

　　在使用相对路径获取静态资源，例如 <img src="./img/xxxx.png" /> 这种方式展示的图片，这些反馈的就会是 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';
　　}
　　},
　　},
　　}
　　}

　　4. 前端路由与服务端接口路由冲突问题

　　在解决前面问题之后，在排查时任然发现部分页面在刷新出现错误。检查很多地方，直至我们检查到nginx的配置时，出现这些错误的原因是页面的路由，与服务端的接口路由似乎是重合的！由此将前端页面的路由被nginx匹配到服务端的路由，这样就是直接转接到服务端去处理，异常就由此产生！

　　解决问题的思路为，前端程序中给所有的接口添加统一的路由前缀入口，nginx转发时匹配这个统一的前缀即可。

　　axios.js：

　　# 设置bashURL
　　axios.defaults.baseURL = "/api";

　　nginx配置文件：

　　location ^~ /api/ {
　　proxy_pass http://pig-gateway:9999/;
　　# proxy_set_header Host $http_host;
　　proxy_connect_timeout 60s;
　　proxy_send_timeout 45s;
　　proxy_read_timeout 450s;
　　proxy_set_header X-Real-IP $remote_addr;
　　proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
　　}

　　开发环境跨域设置调整

　　vue.config.js：　

　devServer: {
　　...
　　proxy: {
　　...
　　'/api': {
　　target: url,
　　changeOrigin: true,
　　logLevel: 'debug'
　　},
　　},
　　...
　　}

　　结尾

　　有关于vue项目如何去掉URL中#符号的方法已经叙述完毕，希望大家后续多多关注。