vue3的项目如何做seo优化?比较简单的做法是预渲染,预渲染跟ssr相比不占用服务器资源,而且配置也十分简单,只需安装vite-plugin-prerender 插件即可。
npm install vite-plugin-prerender --save-dev
vite.config.js:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePrerender from 'vite-plugin-prerender';
const Renderer = vitePrerender.PuppeteerRenderer;
import path from 'path';
export default defineConfig({
plugins: [
vue(),
vitePrerender({
// 要渲染的路由
routes: ['/','/about'],
// 静态文件目录
staticDir: path.join(__dirname, 'dist'),
// 是否压缩 HTML 文件
minify: true,
// 网络请求失败、404 错误等情况下应该返回的 HTML 文件
fallback: 'index.html',
// 渲染时是否显示浏览器窗口,值写false可用于调试
renderer: new Renderer({
headless: true
})
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})