Vue 预渲染

文章目录

• 概述
• vue-cli
• vite

概述

Vue 由于各种优势而被青睐，但由于其一般在客户端渲染，有时 js 文件加载失败，页面便会空白或只显示指定信息，影响展示。另外似乎会影响 SEO 和 一些爬虫，毕竟都要爬取页面内容。

所以我们最好需要进行预渲染，填充 index.html 的内容。

vue-cli

使用以下命令安装

npm install prerender-spa-plugin

新版脚手架使用 webpack5
需使用如下插件

npm install @dreysolano/prerender-spa-plugin

如遇无法安装 chromium 的错误提示，
输入以下代码后再安装上述插件

npm config set puppeteer_download_host=https://npm.taobao.org/mirrors

vue.config.js 中进行配置

const {defineConfig} = require('@vue/cli-service')
const path = require('path')
const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin')
const renderer = PrerenderSPAPlugin.PuppeteerRenderer

module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === 'production' ? 'https://image.fosky.top/projects/homepage/assets/' : './',
  transpileDependencies: true,
  productionSourceMap: false,
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      config.plugins.push(
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          indexPath: path.join(__dirname, 'dist', 'index.html'),
          routes: ['/'],
          renderer: new renderer({
            headless: true
          }),
        })
      );
    }
  }
})

vite

最开始搜到的是 vite-plugin-prerender 这个插件，但试了下，预渲染无页面内容。

后搜索到 vite-ssg

npm i -D vite-ssg vue-router @vueuse/head
npm i vite-plugin-pages -D //读取文件夹生成路由，不用自己再去定义路由
npm i unplugin-vue-components -D //加载自定义组件和按需加载第三方组件库
npm i vite-plugin-vue-layouts -D //路由页面布局模板

main.js

import './assets/main.css'
import App from './App.vue'
import { ViteSSG } from 'vite-ssg'
import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from '~pages'
const routes = setupLayouts(generatedRoutes)

export const createApp = ViteSSG(
  App,
  { routes }
);

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VitePages from 'vite-plugin-pages'
import Layouts from 'vite-plugin-vue-layouts'
import Components from 'unplugin-vue-components/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VitePages(),
    Layouts(),
    Components({
      extensions: ['vue'],
      dts: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  ssgOptions: {
    script: 'async',
    formatting: 'minify',
    format: 'cjs',
  },
})

package.json

- "build": "vite build",
+ "build": "vite-ssg build",

App.vue 中要有 <router-view />

在 src 目录下创建 pages 文件夹，其内部的 *.vue 文件会被自动加载为路由页面。