面试题：Vue Router 的 history 模式部署上线时有哪些注意事项？

在使用 Vue Router 的 history 模式时，部署上线需要注意以下几个关键点，以确保应用能够正常运行：

1. 服务器配置

history 模式的路由通过 URL 路径来访问页面（如 /about），而不是通过哈希（如 /#/about）。因此，服务器需要正确配置，以确保所有路径都返回 index.html，从而让 Vue 应用处理路由。

常见服务器的配置方法：

Nginx：

  location / {
    try_files $uri $uri/ /index.html;
  }

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>

Node.js (Express)：

  const express = require('express');
  const path = require('path');
  const app = express();

  app.use(express.static(path.join(__dirname, 'dist')));

  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
  });

  app.listen(3000, () => {
    console.log('Server is running on port 3000');
  });

Netlify：
在 netlify.toml 中添加以下配置：

  [[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200

Vercel：
在 vercel.json 中添加以下配置：

  {
    "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
  }

2. Base URL 配置

如果应用部署在子路径下（如 https://example.com/my-app/），需要在 Vue Router 中配置 base 选项。

示例：

const router = new VueRouter({
  mode: 'history',
  base: '/my-app/', // 设置基础路径
  routes: [
    // 路由配置
  ],
});

同时，确保构建时的 publicPath 也正确配置（在 vue.config.js 中）：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
};

3. 404 页面处理

在 history 模式下，如果用户直接访问一个不存在的路径（如 /invalid-path），服务器会返回 404 错误。为了避免这种情况，可以配置一个通用的 404 页面。

示例：

const router = new VueRouter({
  mode: 'history',
  routes: [
    // 其他路由
    {
      path: '*',
      component: NotFoundComponent, // 404 页面组件
    },
  ],
});

4. CDN 和缓存配置

如果使用 CDN 或缓存服务，确保所有路径都指向 index.html，并且不会缓存错误的页面。

示例：

在 CDN 配置中，设置所有路径都回源到 index.html。
避免缓存 HTML 文件，以确保用户总是获取最新的版本。

5. 静态资源路径

确保静态资源（如 JS、CSS、图片等）的路径正确。如果应用部署在子路径下，静态资源的路径需要相对于基础路径。

示例：

在 vue.config.js 中配置 publicPath：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
};

6. SEO 和社交分享

history 模式对 SEO 更友好，因为 URL 更加清晰。但需要确保服务器正确配置，以便爬虫能够抓取所有页面。

注意事项：

使用 <meta> 标签为每个页面设置标题和描述。
使用服务器端渲染（SSR）或预渲染（Prerendering）进一步提升 SEO 效果。

7. 测试和验证

在部署上线前，务必进行全面的测试，确保以下内容：

所有路由都能正确访问。
直接访问路径（如 /about）不会返回 404。
静态资源加载正常。
404 页面能够正确显示。

总结

在 Vue Router 的 history 模式下部署上线时，需要注意以下事项：

服务器配置：确保所有路径都返回 index.html。
Base URL 配置：如果部署在子路径下，正确配置 base 和 publicPath。
404 页面处理：配置通用的 404 页面。
CDN 和缓存配置：确保 CDN 和缓存服务正确处理路径。
静态资源路径：确保静态资源的路径正确。
SEO 和社交分享：优化 SEO 和社交分享体验。
测试和验证：全面测试，确保应用正常运行。

通过以上注意事项，可以确保 Vue Router 的 history 模式在生产环境中正常运行，并提供更好的用户体验。

THE END