vue打包部署到服务器，后端修改了index.html，导致一刷新就重新加载index.html

Question

vue项目打包后部署到服务器，服务端动态往index.html写入了script,在组件中刷新页面会重新进入index.html后进入了默认的组件，而不是当前组件，是什么原因造成的呢？

Answer 1

这是因为在单页应用中，Vue 路由在浏览器端（客户端）进行管理，而动态往 index.html 中写入的 script 标签实际上是在服务端加载，这意味着在客户端重新进入 index.html 时，控制权已经交给了服务端，此时客户端的 Vue 实例已经被卸载，因此无法正确地匹配到当前路由所对应的组件。

要解决这个问题，一种比较通用的做法是在服务端返回 index.html 时，将当前的路由信息一并返回，并由客户端在重新进入 index.html 的时候，根据路由信息重新初始化 Vue 实例和对应的组件。具体可以通过检查浏览器地址栏中的路由信息，然后通过 Vue Router 的 push 或 replace 方法来进行路由转发。如果想要更加高效的实现，可以考虑使用服务端渲染 (SSR) 技术来进行解决。