返回

Vue-CLI@4.x 多页面应用 History 路由改造的陷阱

前端

在软件开发的世界里，技术革新日新月异，对于前端工程师来说，拥抱最新的技术栈至关重要。Vue-CLI@4.x 的出现为多页面应用 (MPA) 的开发带来了新的可能，而 history 路由则是实现 SPA（单页面应用）体验的必经之路。然而，从 hash 模式切换到 history 模式并非一帆风顺，本文将记录下我这两天多页面应用改造 history 路由踩坑的心路历程，希望能为各位开发者提供宝贵的经验借鉴。

陷阱 1：路由模式的理解误区

初次接触 history 路由，我误以为只需要在 Vue Router 的配置中将 mode 设置为 "history" 即可。然而，事实并非如此。hash 模式和 history 模式有着本质的区别。hash 模式依靠浏览器的 hash 值来管理路由状态，而 history 模式则利用 HTML5 的 history.pushState() API 来修改浏览器的历史记录，从而实现无刷新地切换页面。

解决方案：

要正确改造为 history 模式，需要在应用的根目录下创建 .htaccess 文件（对于 Apache 服务器）或 nginx.conf 文件（对于 Nginx 服务器），并添加以下配置：

# Apache 服务器
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

# Nginx 服务器
location / {
  try_files $uri $uri/ /index.html;
}

陷阱 2：构建产物的配置问题

改造好路由模式后，我兴致勃勃地构建了生产环境代码，却发现部署后网站无法正常访问。经过一番排查，我发现问题出在构建产物中缺少必要的依赖。

解决方案：

在构建生产环境代码时，需要确保在 package.json 中添加 vue-router 的 history 模式依赖：

"dependencies": {
  "vue-router": "^4.0.0",
  "vue-router-history": "^1.0.0"
}

陷阱 3：页面刷新时 404 错误

改造完成后，我发现页面刷新时会报 404 错误。这让我十分困惑，因为在开发环境中一切正常。经过一番研究，我发现这是由于 history 模式下浏览器对页面刷新的处理方式不同所致。

解决方案：

为了解决这个问题，需要在 Vue Router 的配置中设置 fallback：

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  fallback: true
});

陷阱 4：子应用间路由跳转问题

在多页面应用中，经常需要在子应用之间进行路由跳转。然而，在改造 history 路由后，我发现子应用间的路由跳转出现了问题。

解决方案：

要解决这个问题，需要在每个子应用的 Vue Router 配置中设置 base 属性：

const router = new VueRouter({
  mode: 'history',
  base: '/sub-app-name',
});

结语

通过以上踩坑经历，我深刻地认识到技术改造并非一蹴而就，需要细致的思考和实践。在改造 history 路由的过程中，我不断地遇到问题，但每一次解决问题的过程都让我对 Vue Router 的原理有了更深入的理解。希望这篇文章能为各位开发者提供一些参考，避免在改造过程中踩坑。