浅谈vue项目4rs vue-router上线后history模式遇到的坑

今天，长沙网络推广将和大家分享一篇关于vue项目中使用vue-router并上线后，在history模式下遇到的一些问题和解决方法。这个问题对于很多开发者来说具有很大的参考价值，希望能够对大家有所帮助。

在项目开发过程中，我们往往需要考虑路径的美观性。hash模式的路径带有符号，看起来并不太理想。我们选择了history模式。在项目实施过程中，由于涉及到网站的重构和SEO问题，我们需要对vue-router的路径进行全面更改。

在打包上线后，我们面临了一系列的问题。在尝试了许多解决方案后，我们发现如果将config里的index.js中的assetsPublicPath路径从‘/’改为‘./’，在hash模式下是没有问题的。一旦切换到history模式，一些动态js文件的路径就会出现错误。

我们尝试将‘./’改回‘/’，并在history模式下重新打包上线。虽然点击跳转页面时一切正常，但刷新页面时会出现问题。这是因为，在history模式下，页面跳转并不是通过请求服务器完成的，而是通过js操作history API改变地址实现的。当您刷新页面时，浏览器会向服务器请求对应的路由，如果服务器没有这个路由就会导致404错误。

针对这个问题，我们有两种解决方法。第一种是设置代理服务器，让所有访问服务器的地址都返回同一个入口文件。这种方法比较推荐。第二种方法是将每个目录都设置为静态文件的形式，以避免报错。

在我们的项目中，服务器采用的是nginx。我们没有采用第一种方法，而是使用了nodejs和express搭建了一个简单的服务器，并引入了官方推荐的中间件connect-history-api-fallback。

该中间件的使用方法非常简单。我们只需要在服务器的app.js文件中引入该中间件，然后在绑定路由之前使用它。例如：

```javascript

var history = require('connect-history-api-fallback');

app.use(history({

rewrites: [

{ from: /^\/wap\/.$/, to: '/index.html' } // 这是正确的方式

]});

```

在一开始，我们的设置是这样的：

```javascript

app.use(history({

rewrites: [

{ from: /^\/wap\/.$/, to: '/' }

]

}));

```

这样的设置会导致刷新后路径后面总是多了一个"/"，看起来非常奇怪。于是我们尝试将重定向改为当前目录下的html文件，结果真的解决了问题。

以上就是长沙网络推广分享给大家的关于vue项目在vue-router上线后history模式下遇到的坑的全部内容。希望能给大家带来帮助，也希望大家能够支持我们的SEO工作。如果您有任何疑问或建议，请随时与我们联系。