Skip to content

beansmile/vite-plugin-ssg

Repository files navigation

VitePluginSsg

方便前端纯 vue 静态页面SEO。

// vite.config.js
import { VitePluginSSG } from 'vite-plugin-ssg'

export default {
  plugins: [VitePluginSSG()],
}

VitePluginSsg Options

export interface Options {
  /**
   * @default '/'
   * @description 第一次访问的路由
   */
  root: '/',

  // debug 模式下,会打开浏览器,只在调试时使用,禁止在生产环境使用
  debug: false,

  /**
   * @default 'ssg-templates'
   * @description ssg模板输出目录, 相对于build.outDir
   */
  ssgOutDir: 'ssg-templates',

  /**
   * @default []
   * @description 只需要处理的路由, String[]
   * @description 如果传了这个参数,只会处理这些路由,不会处理其他路由
   */
  includes: [],

  /**
   * @default []
   * @description 不需要处理的路由, Functin | String[] | RegExp[] | Function[]
   * @param {string} route 路由
   * @returns {boolean} true: 不处理,false: 处理
   */
  excludes: [],

  /**
   * @default () => true
   * @description 自动路由匹配规则, Functin | String[] | RegExp[] | Function[]
   * @param {string} route 路由
   * @returns {boolean} true: 匹配,false: 不匹配
   */
  routeRules: () => true,

  /**
   * @default () => {}
   * @description 页面渲染前,在页面执行的方法
   * @description 会在每个页面执行,可以在这里注入一些全局变量,如:window.xxx = xxx
   */
  pageBeforeEvaluate: () => {},

  /**
   * @default () => {}
   * @description 页面渲染后,在页面执行的方法
   * @description 会在每个页面执行,可以在这里做一些 DOM 操作,如:document.querySelector('.xxx').innerHTML = 'xxx'
   */
  pageAfterEvaluate: () => {}, // 页面渲染前执行的方法

  /**
   * @default 5
   * @description 并发数,用于控制同时 render 的页面数量
   */
  concurrency: 5,
}

Nginx

map $http_user_agent $is_bot {
  default         0;
  "~* qihoobot|Baiduspider|Googlebot|Googlebot-Mobile|Googlebot-Image|Mediapartners-Google|Adsbot-Google|Feedfetcher-Google|Yahoo! Slurp|Yahoo! Slurp China|YoudaoBot|Sosospider|Sogou spider|Sogou web spider|MSNBot|ia_archiver|Tomato Bot|FeedDemon|JikeSpider|Indy Library|Alexa Toolbar|AskTbFXTV|AhrefsBot|CrawlDaddy|CoolpadWebkit|Java|Feedly|UniversalFeedParser|ApacheBench|Microsoft URL Control|Swiftbot|ZmEu|oBot|jaunty|Python-urllib|lightDeckReports
  Bot|YYSpider|DigExt|YisouSpider|HttpClient|MJ12bot|heritrix|EasouSpider|Ezooms|^$"  1;
}

server{
  # 所有请求优先访问 SSG,参考以下配置
  location / {
    root xxxx;
    try_files /ssg-templates$uri /ssg-templates$uri/index.html $uri /index.html =404;
  }

  # 只需要 seo 访问,参考以下配置
  location / {
    root xxxx;
    if ($is_bot) {
      rewrite ^ /ssg-templates$request_uri last;
    }
    try_files $uri /index.html =404;
  }

  location /ssg-templates {
    internal;
    alias xxxx;
    try_files /ssg-templates$uri /ssg-templates$uri/index.html $uri /index.html =404;
  }
}

VitePluginImageSizes

自动计算图片大小,给图片添加 width 和 height 属性。 如果图片已设置 width 和 height 属性,则不会再次计算。

// vite.config.js
import { VitePluginImageSizes } from 'vite-plugin-ssg';

export default {
  plugins: [VitePluginImageSizes()],
}

VitePluginImageSizes Options

export interface Options {
  /**
   * @default false
   * @description 是否自动给图片添加 loading 属性
   * @description 如图片已设置 loading 属性,则不会处理
   */
  lazyLoading: false  'lazy' | 'eager';
}

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published