vue项目去掉URL中的#_代码007(未授权)

本文介绍: 去掉VUE项目路径中难看的#号，所经历的过程，和踩过的坑

最近，同事跟我说，项目的访问路径里的/#/挺不美观的，就下手尝试去掉，本以为就是一句代码搞定的事情，结果遇到不少问题。

现在把我遇到的情况记录下来，做个存档，如果看到文章的有缘人刚好遇到跟我一样的情况，我的内容能提供多一个解决方案也是不错的。

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

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

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

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

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

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

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

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

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

publicPath = '/';

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

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

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

这个问题困扰我不少时间，网上也没有找到网友有类似的情况，最后发现是因为开发环境调试时，为了解决跨域问题，在项目中配置了 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';
          }
        },
      },
  }
}

前面三个问题解决后，本来以为已经全部正常。但是再测试发现，部分页面刷新仍然会出现问题，但是通过前端的排查未能发现原因。直到检查到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'
      },
    },
 	...
 }