方便前端纯 vue 静态页面SEO。
// vite.config.js
import { VitePluginSSG } from 'vite-plugin-ssg'
export default {
plugins: [VitePluginSSG()],
}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,
}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;
}
}
自动计算图片大小，给图片添加 width 和 height 属性。 如果图片已设置 width 和 height 属性，则不会再次计算。
// vite.config.js
import { VitePluginImageSizes } from 'vite-plugin-ssg';
export default {
plugins: [VitePluginImageSizes()],
}export interface Options {
/**
* @default false
* @description 是否自动给图片添加 loading 属性
* @description 如图片已设置 loading 属性，则不会处理
*/
lazyLoading: false ｜ 'lazy' | 'eager';
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent