ssr 命令

README.md

@@ -16,3 +16,17 @@ If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has a
    1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
    2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+
+
+
+
+
+
+
+
+# 环境运行
+npm run dev 无法获取接口数据
+npm run dev:ssr 运行本地文件
+npm run prod:ssr 运行打包文件
+node server   默认prod模式  开发环境进行服务端渲染

server.js

@@ -5,19 +5,20 @@ import express from 'express'
 import serverStatic from 'serve-static'
 import { createServer as createViteServer } from 'vite'
 import ssrManifest from './dist/client/.vite/ssr-manifest.json' assert { type: "json" }
+// process.env.NODE_ENV = "production"
 const isProd = process.env.NODE_ENV  === 'production'
-const __dirname = path.dirname(fileURLToPath(
-    import.meta.url))
+// console.log(123456,process.env.NODE_ENV)
+// const isProd = true
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 async function createServer() {
-    console.log(process.env.NODE_ENV)
     const app = express()
     // 以中间件模式创建 Vite 应用，并将 appType 配置为 'custom'
-        // 这将禁用 Vite 自身的 HTML 服务逻辑
-        // 并让上级服务器接管控制
-        const vite = await createViteServer({
-            server: { middlewareMode: 'ssr' },
-            appType: 'custom'
-        })
+    // 这将禁用 Vite 自身的 HTML 服务逻辑
+    // 并让上级服务器接管控制
+    const vite = await createViteServer({
+        server: { middlewareMode: 'ssr' },
+        // appType: 'custom'
+    })
     if(!isProd){
         // 使用 vite 的 Connect 实例作为中间件
         // 如果你使用了自己的 express 路由（express.Router()），你应该使用 router.use
@@ -29,8 +30,6 @@ async function createServer() {
     }else{
         app.use(serverStatic(path.resolve(__dirname,'dist/client')))
     }
-
-
     app.use('*', async(req, res, next) => {
         const url = req.originalUrl
         let template
@@ -51,7 +50,7 @@ async function createServer() {
                 // 3a. 加载服务器入口。vite.ssrLoadModule 将自动转换
                 //    你的 ESM 源码使之可以在 Node.js 中运行！无需打包
                 //    并提供类似 HMR 的根据情况随时失效。
-                render  = (await vite.ssrLoadModule('/src/entry-server.ts')).render
+                render  = (await vite.ssrLoadModule('/src/entry-client.ts')).render
                 // 3b. 从 Vite 5.1 版本开始，你可以试用实验性的 createViteRuntime
                 // API。
                 // 这个 API 完全支持热更新（HMR），其工作原理与 ssrLoadModule 相似
@@ -66,18 +65,12 @@ async function createServer() {
                 )
                 render  = (await vite.ssrLoadModule('/src/entry-server.ts')).render
             }
-           
-            
-
-
-
-
             // 4. 渲染应用的 HTML。这假设 entry-server.js 导出的 `render`
             //    函数调用了适当的 SSR 框架 API。
             //    例如 ReactDOMServer.renderToString()
             const manifest =  ssrManifest
             if(!isProd){
-                const { appHtml, state } = await render(url,manifest)
+                const { appHtml, state } = await render(url)
                 // 5. 注入渲染后的应用程序 HTML 到模板中。
                 html = template
                 .replace(`<!--ssr-outlet-->`, appHtml)
@@ -89,7 +82,6 @@ async function createServer() {
                 .replace(`<!--ssr-outlet-->`, appHtml)
                 .replace('\'<!--vuex-state-->\'', JSON.stringify(state))
             }
-
             // 6. 返回渲染后的 HTML。
             res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
         } catch (e) {
@@ -99,7 +91,6 @@ async function createServer() {
             next(e)
         }
     })
-
     app.listen(5173, () => {
         console.log("node server.js",isProd ? `运行 生产环境` : `运行 开发环境`)
     })

src/components/layout/header.vue

@@ -11,7 +11,7 @@ export default defineComponent({
         // menuList.value = store.state.menuList
         return { store,currentone }
     },
-    async asyncData({store, route,a}){
+    asyncData({store, route}:any){
         return store.dispatch('getMenuList')
     }
 })
@@ -19,7 +19,8 @@ export default defineComponent({
 
 </script>
 <template>
-  <header class="header-absolute sticky-header">
+    dasj
+        <header class="header-absolute sticky-header">
             <div class="custom-container-one">
                 <div class="mainmenu-area  d-flex align-items-center justify-content-center">
                     <div class="logo">

src/entry-client.ts

@@ -1,5 +1,4 @@
 import { createApp } from './main'
-// import indexedDb from './utils/indexedDb'
 const { app, router, store } = createApp()
 if(window.__INITIAL_STATE__){
     store.replaceState(window.__INITIAL_STATE__)

src/views/home/homeIndex.vue

@@ -15,14 +15,13 @@ export default defineComponent({
         //         console.log(1,a)
         // },3000)
     },
-    async asyncData({store}:any){
+    asyncData({store, route} :any){
         return store.dispatch('getMenuList')
     }
 })
 </script>
 <template>
-        {{ store.state.menuList }}
-        <img src="https://pic.rmb.bdstatic.com/bjh/914b8c0f9814b14c5fedeec7ec6615df5813.jpeg" >
+        <!-- {{ store.state }} -->
 
 </template>
 <style lang="scss" scoped>