dev test

2.js

+import puppeteer from 'puppeteer';
+
+(async () => {
+  const browser = await puppeteer.launch();
+  const page = await browser.newPage();
+
+  await page.goto('https://developer.chrome.com/');
+
+  // Set screen size
+  await page.setViewport({width: 1080, height: 1024});
+
+  // Type into search box
+  await page.type('.search-box__input', 'automate beyond recorder');
+
+  // Wait and click on first result
+  const searchResultSelector = '.search-box__link';
+  await page.waitForSelector(searchResultSelector);
+  await page.click(searchResultSelector);
+
+  // Locate the full title with a unique string
+  const textSelector = await page.waitForSelector(
+    'text/Customize and automate'
+  );
+  const fullTitle = await textSelector?.evaluate(el => el.textContent);
+
+  // Print the full title
+  console.log('The title of this blog post is "%s".', fullTitle);
+
+  await browser.close();
+})();

package.json

@@ -2,6 +2,7 @@
   "name": "vite-plugin-seo-prerender",
   "private": true,
   "version": "0.2.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -15,10 +16,13 @@
   "devDependencies": {
     "@types/node": "^20.3.1",
     "@vitejs/plugin-vue": "^4.2.3",
-    "puppeteer": "^20.7.3",
+    "puppeteer": "^20.7.4",
+    "sass": "^1.63.6",
     "tsup": "^7.0.0",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-legacy": "^2.1.0",
     "vite-plugin-sprites": "^0.2.0",
     "vue-tsc": "^1.8.0"
   }

packages/src/index.ts

-import seoPrerender from './render'
 import childProcess from 'child_process'
 import path from 'path'
+import seoPrerender from './render'
+import publicHtml from "./public"
+import {Config} from "./types"
+import {createServer} from 'vite';
+import fs from 'fs'
+import puppeteer from 'puppeteer'
 
-interface Config {
-  puppeteer?: any // puppeteer一些配置
-  routes?: string[] // 需要生成的路由地址
-  removeStyle?: boolean // 启用vite preview会自带有些样式，默认下移除
-  callback?: Function
-  htmlRoutes?: string[] // 处理public目录下的html文件
-}
 
+let pPage
 const prerender = (config: Config) => {
   const cfgConfig = {
     outDir: '',
     mode: '',
     root: '',
-    local: ''
+    local: '',
+    base: ''
   }
   return {
     name: 'vitePluginSeoPrerender',
@@ -24,22 +24,92 @@ const prerender = (config: Config) => {
       cfgConfig.outDir = cfg.build.outDir
       cfgConfig.mode = cfg.mode
       cfgConfig.root = cfg.root
+      cfgConfig.base = cfg.base
+    },
+    async buildStart() {
+
     },
     buildEnd() {
-      //console.log('buildEnd')
+      console.log('buildEnd，没看到有触发')
+    },
+    async load(id) {
+    },
+    transform(code, id) {
+      /*if (id.endsWith('.html')) {
+        console.log('transform:',id)
+      }*/
+    },
+    /*transformIndexHtml(html, tag) {
+      //console.log('transform',html)
+    },*/
+    transformIndexHtml: {
+      async transform(html, ctx) {
+        console.log('transform')
+        //console.log('html',html)
+        //console.log('ctx',ctx)
+        //ctx.moduleGraph.transformIndexHtml(html=>{})
+
+      }
+    },
+    async handleHotUpdate({file, server}) {
+      if (file.endsWith('.html')) {
+        /*console.log('file:',server)
+        // 启动一个浏览器服务
+        if (!pPage) {
+          const browser = await puppeteer.launch(Object.assign({headless: 'new'}, config.puppeteer || {}));
+          pPage = await browser.newPage()
+          await pPage.goto('http://127.0.0.1:5173')
+          await pPage.setViewport({width: 1024, height: 768})
+        }
+        pPage.content()
+          .then(html => {
+            console.log('page content', html)
+          })
+          .catch(res => {
+            console.log('catch', res)
+          })*/
+      }
     },
     configureServer(server) {
-      console.log('is build')
-      const {watcher} = server
-      if (config.htmlRoutes?.length) {
-        watcher.on('change', (filePath) => {
-          const relativePath = path.relative(server.config.root, filePath).replace('public', '').replace(/\\/g,'/')
-          if (config.htmlRoutes.includes(relativePath)) {
-            // 监听 public 目录下的 HTML 文件更改
-            console.log('server',server)
+      if (config.html?.routes?.length) {
+        server.middlewares.use((req, res, next) => {
+          //  console.log(server.moduleGraph)
+          const baseUrl = req.url.replace(cfgConfig.base, '/')
+          console.log('base',baseUrl)
+          if (config.html.routes.includes(baseUrl)) {
+            console.log(req.url)
+            const module = server.moduleGraph.getModuleByUrl(req.url)
+              .then(res => {
+                console.log(res, 'okk')
+              })
+
+            const htmlContent = module ? module.content : '';
+            res.setHeader('Content-Type', 'text/html')
+            res.end('12');
+            return;
           }
+          next()
         })
       }
+      // console.log('configureServer')
+      //const {watcher} = server
+      /*if (config.htmlRoutes?.length) {
+        watcher.on('change', async (filePath) => {
+          const relativePath = path.relative(server.config.root, filePath).replace('public', '').replace(/\\/g, '/')
+          if (config.htmlRoutes.includes(relativePath)) {
+            // 监听 public 目录下的指定　HTML 文件更改
+            let hostPort = '' // 获取启用的服务ip地址端口
+            const resolvedUrls = server.resolvedUrls
+            for (const key in resolvedUrls) {
+              if (resolvedUrls[key].length) {
+                hostPort = resolvedUrls[key][0]
+              }
+            }
+            await publicHtml(Object.assign(config,
+              {hostPort: hostPort, filePath: filePath}), 'dev')
+          }
+        })
+      }*/
     },
     closeBundle() {
       if (!config?.routes?.length) {
@@ -51,7 +121,7 @@ const prerender = (config: Config) => {
         return
       }
       console.log('[vite-plugin-seo-prerender] is start..')
-      const cProcess = childProcess.exec('vite preview', (err, stdout, stderr) => {
+      const cProcess = childProcess.exec('vite preview', (err) => {
         if (err) {
           console.error('执行命令时发生错误：', err);
           return;

packages/src/public.ts

+/*
+处理public静态文件，两个功能
+1.将页面的公共样式及脚本动态插入到静态页，实现样式共用；
+2.静态html也可以使用公共如头尾部*/
+import puppeteer from 'puppeteer'
+import {Config} from "./types"
+
+interface publicConfig extends Config {
+  hostPort: string
+  filePath: string
+}
+
+/**
+ * 获取主入口index的style和script
+ */
+const getPublicIndex = async (config: publicConfig) => {
+  const browser = await puppeteer.launch(Object.assign({headless: 'new'}, config.puppeteer || {}));
+  const page = await browser.newPage()
+  await page.goto(config.hostPort)
+  await page.setViewport({width: 1024, height: 768})
+  const htmlContent = await page.content()
+  //提取link
+  const styleRegex = /<style\b[^>]*>([\s\S]*?)<\/style>/gi
+  const matches = htmlContent.matchAll(styleRegex)
+  console.log('style',matches)
+  for (const match of matches) {
+    const styleContent = match[1]
+    // 处理style标签中的内容
+    console.log(styleContent);
+  }
+
+}
+const publicHtml = async (config: publicConfig, mode?: string) => {
+  const styleScript = await getPublicIndex(config)
+}
+export default publicHtml

packages/src/types.ts

+export interface Config {
+  puppeteer?: any // puppeteer一些配置
+  routes?: string[] // 需要生成的路由地址
+  removeStyle?: boolean // 启用vite preview会自带有些样式，默认下移除
+  callback?: Function
+  html:{ // 处理public目录下的html文件
+    routes?: string[]
+  }
+}

public/contact/index.html

@@ -3,9 +3,14 @@
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
+
 </head>
 <body>
 this is contact page ,transform 123?
-<p>12345678910111213141617.18,19</p>
+<p>1.2.3.4.5.6.7.8.9.10.11.12.13.15.16.17.18
+19.20.21.22.23.24.25.26.27.28.19.20.21.22.23.24.25.26.27.28
+  .29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48.49.50
+  51.52.53.54.55.56
+</p>
 </body>
 </html>

src/assets/style.css

-body{margin: 0;padding: 0;font-size: 14px;}

src/assets/style.scss

+body{margin: 0;padding: 0;font-size: 15px}

src/main.ts

 import {createApp} from 'vue'
 import App from './App.vue'
 import router from './router'
-import './assets/style.css'
+import './assets/style.scss'
 
 createApp(App).use(router).mount('#app')

src/router.ts

@@ -21,7 +21,7 @@ const routes = [
 // console.log(routes)
 // 配置路由
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHistory(import.meta.env.BASE_URL),
   //history: createWebHashHistory(),
   routes: routes
 })

src/views/test.vue

@@ -7,5 +7,5 @@
 
 </script>
 <style>
-.index{color: antiquewhite}
+.index{color: antiquewhite;font-size: 16px}
 </style>

vite.config.ts

@@ -2,6 +2,7 @@ import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 //import seoPrerender from 'vite-plugin-seo-prerender'
 import seoPrerender from './packages/src'
+import {createHtmlPlugin} from 'vite-plugin-html'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -9,7 +10,24 @@ export default defineConfig({
     vue(),
     seoPrerender({
       routes: ['/about'],
-      htmlRoutes: ['/contact/index.html']
+      html: {
+        routes: ['/contact/index.html']
+      }
     })
-  ]
+    /*createHtmlPlugin({
+      // 配置需要处理的HTML文件路径
+      include: [/publ0ic\/.+\.html$/],
+      // 处理HTML文件的回调函数
+      transform(ctx) {
+        // 编辑返回新内容
+        console.log('transform',ctx)
+        const { path, html } = ctx
+        // 对html进行编辑，可以使用正则表达式或其他方式进行修改
+        const newHtml = html.replace(/Hello/g, 'Hi')
+        // 返回新的HTML内容
+        return { html: 'newHtml' }
+      }
+    })*/
+  ],
+  base: './'
 })