返回

Vite 2 和 Vue 3 打造 SEO 优化的多页应用：分步指南

vue.js

用 Vite 2 和 Vue 3 构建 SEO 优化的多页应用

简介

对于大型 Web 应用，将代码拆分为多个页面对于提升性能和用户体验至关重要。本文将使用 Vite 2 和 Vue 3 指导你构建一个多页应用，并优化其 SEO。

Vite 2 配置

Vite 2 是一个现代构建工具，可为你提供增量构建、热模块替换等强大功能。对于多页应用，我们需要在 vite.config.js 中配置 build.rollupOptions.input 选项，以指定每个页面的入口 HTML 文件。例如：

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        admin: resolve(__dirname, 'src/admin/index.html'),
      }
    }
  }
})

页面组件

每个页面都有一个对应的 Vue 组件，作为其入口点。例如，MainPage.vue 对应于主页，而 AdminPage.vue 对应于管理页面：

// MainPage.vue
<template>
  <h1>Main Page</h1>
</template>
<script>
export default {
  name: 'MainPage',
}
</script>

// AdminPage.vue
<template>
  <h1>Admin Page</h1>
</template>
<script>
export default {
  name: 'AdminPage',
}
</script>

更新 HTML 文件

每个 HTML 文件需要包含对应 Vue 组件的引用：

<!-- index.html -->
<div id="app">
  <MainPage />
</div>

<!-- src/admin/index.html -->
<div id="app">
  <AdminPage />
</div>

SEO 优化

为了优化 SEO，我们可以利用 Vite 的 build.rollupOptions.output 选项，为每个页面指定标题和元

export default defineConfig({
  // ...
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        admin: resolve(__dirname, 'src/admin/index.html'),
      },
      output: {
        entryFileNames: `[name].js`,
        chunkFileNames: `[name].js`,
        assetFileNames: `[name].[ext]`,
        manualChunks: {
          'chunk-vendors': ['vue', 'vue-router'],
          'chunk-common': ['lodash'],
        },
      },
    }
  }
})

手动分块

手动分块可以将第三方库提取到单独的 chunk 中，从而减少初始加载时间。例如，我们可以将 Vue 和 Lodash 分块：

output: {
  manualChunks: {
    'chunk-vendors': ['vue', 'vue-router'],
    'chunk-common': ['lodash'],
  },
}

总结

使用 Vite 2 和 Vue 3 构建多页应用是一个简单而有效的方式。通过优化 SEO 和手动分块，你可以提高你的应用的性能和用户体验。

常见问题解答

  1. 如何创建子页面？
    • 创建一个新的 Vue 组件和相应的 HTML 文件，然后在 vite.config.js 中添加入口。
  2. 如何处理路由？
    • Vite 2 不提供内置的路由，你可以使用 Vue Router 或其他路由库。
  3. 如何缓存页面？
    • Vite 2 支持使用 service workers 进行缓存，你可以通过 vite.config.js 配置。
  4. 如何部署我的应用？
    • 你可以使用 Vite 的 build 命令构建你的应用，然后使用常规的 Web 服务器部署它。
  5. 如何优化我的应用的加载速度？
    • 使用代码拆分、压缩和懒加载来减少初始加载时间。