feat: prod ssr也能用了

bangbang93 · Oct 25, 2023 · 477558a · 477558a
1 parent 0d77cd7
commit 477558a
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 41 deletions.
diff --git a/config/index.js b/config/index.js
@@ -2,7 +2,6 @@
  * Created by bangbang93 on 2017/3/20.
  */
 'use strict'
-/* eslint-disable @typescript-eslint/no-require-imports,@typescript-eslint/no-var-requires */
 const configure = {
   database: require('./default/database'),
   session: require('./default/session'),
@@ -12,7 +11,7 @@ const configure = {
 
 const index = Object.keys(configure)
 
-const env = process.env.NODE_ENV ?? 'development'
+const env = process.env.CONFIG_ENV ?? process.env.NODE_ENV ?? 'development'
 
 index.forEach((config) => {
   try {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "node": ">=16.0.0 <21.0.0"
   },
   "scripts": {
-    "start": "nest start",
+    "start": "node packages/server/dist/main.js",
     "dev": "npm -w @bangbang93/freyja-server run dev",
     "pm2": "pm2 startOrReload process.json",
     "build": "npm -ws run build --if-present",

diff --git a/packages/home/package.json b/packages/home/package.json
@@ -25,6 +25,7 @@
     "@vue/shared": "^3.3.4",
     "animate.css": "^3.7.2",
     "core-js": "^3.8.3",
+    "devalue": "^4.3.2",
     "element-plus": "^2.4.1",
     "font-awesome": "^4.7.0",
     "http-errors": "^2.0.0",
@@ -35,7 +36,7 @@
     "mavon-editor": "^3.0.0-beta",
     "prismjs": "^1.29.0",
     "vue": "^3.2.45",
-    "vue-fetch": "^2.0.0",
+    "vue-fetch": "^3.0.0-2",
     "vue-router": "^4.2.5",
     "vuex": "^4.1.0"
   }

diff --git a/packages/home/src/_default.page.client.ts b/packages/home/src/_default.page.client.ts
@@ -2,15 +2,14 @@
  * Created by bangbang93 on 2017/8/25.
  */
 'use strict'
-import {App} from 'vue'
-import {createHome} from './entries'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import 'element-plus/dist/index.css'
+import 'prismjs/themes/prism-okaidia.css'
+import {createHome} from './entries'
 
 import './utils/prism.ts'
-import 'prismjs/themes/prism-okaidia.css'
-import 'element-plus/dist/index.css'
 
-export async function render(): Promise<App> {
+export async function render(): Promise<void> {
   const {app, router, store} = createHome()
   if (window.__INITIAL_STATE__) {
     // We initialize the store state with the data injected from the server
@@ -44,6 +43,5 @@ export async function render(): Promise<App> {
     app.component(key, component)
   }
 
-  app.mount('app')
-  return app
+  app.mount('#app')
 }
diff --git a/packages/home/src/_default.page.server.ts b/packages/home/src/_default.page.server.ts
@@ -3,8 +3,9 @@
  */
 'use strict'
 import {renderToString} from '@vue/server-renderer'
+import * as devalue from 'devalue'
 import * as HttpErrors from 'http-errors'
-import {dangerouslySkipEscape, escapeInject} from 'vike'
+import {dangerouslySkipEscape, escapeInject} from 'vike/server'
 import {PageContext} from 'vike/types'
 import {createHome} from './entries'
 
@@ -35,12 +36,12 @@ export async function render(pageContext: PageContext) {
     throw new HttpErrors.NotFound('no such route')
   }
   await Promise.all(
-    matchedComponents.map((Component) => {
-      if (!Component) return Promise.resolve()
-      if ('asyncData' in Component && Component.asyncData) {
+    matchedComponents.map(async (component) => {
+      if (!component) return null
+      if ('asyncData' in component && component.asyncData) {
         store.commit('setOrigin', pageContext.origin)
         store.commit('setReferer', pageContext.referer)
-        return Component.asyncData({
+        return component.asyncData({
           store,
           route: router.currentRoute.value,
         })
@@ -67,6 +68,9 @@ export async function render(pageContext: PageContext) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content="${desc}" />
         <title>${title}</title>
+        <script>
+          window.__INITIAL_STATE__ = ${dangerouslySkipEscape(devalue.uneval(pageContext.state))}
+        </script>
       </head>
       <body>
         <div id="app">${dangerouslySkipEscape(appHtml)}</div>

diff --git a/packages/home/src/entries/index.ts b/packages/home/src/entries/index.ts
@@ -9,17 +9,17 @@ import VueFetch from 'vue-fetch'
 import App from '../pages/index.page.vue'
 import {createHomeRouter} from '../router'
 import '../scss/style.scss'
-import {createStore} from '../store'
+import {createRootStore} from '../store'
 
 interface ICreateHome {
   app: VueApp
   router: ReturnType<typeof createHomeRouter>
-  store: ReturnType<typeof createStore>
+  store: ReturnType<typeof createRootStore>
 }
 
 export function createHome(): ICreateHome {
   const router = createHomeRouter()
-  const store = createStore()
+  const store = createRootStore()
   const app = createSSRApp(App)
   app.use(router)
   app.use(store)

diff --git a/packages/home/src/router/index.ts b/packages/home/src/router/index.ts
@@ -2,51 +2,51 @@
  * Created by bangbang93 on 2017/8/25.
  */
 'use strict'
-import {createMemoryHistory, createRouter, createWebHistory, Router} from 'vue-router'
+import {createMemoryHistory, createRouter, createWebHistory, Router, RouteRecordRaw} from 'vue-router'
 
 export function createHomeRouter(): Router {
-  const routes = [
+  const routes: RouteRecordRaw[] = [
     {
       path: '/',
-      component: import('../pages/home/home.vue'),
+      component: () => import('../pages/home/home.vue'),
       name: 'home',
     },
     {
       path: '/article/:id',
-      component: import('../pages/home/article.vue'),
+      component: () => import('../pages/home/article.vue'),
       name: 'article',
     },
     {
       path: '/page/link',
-      component: import('../pages/home/link.vue'),
+      component: () => import('../pages/home/link.vue'),
       name: 'link',
     },
     {
       path: '/page/:name',
-      component: import('../pages/home/page.vue'),
+      component: () => import('../pages/home/page.vue'),
       name: 'general-page',
     },
     {
       path: '/tag/:tag',
-      component: import('../pages/home/home.vue'),
+      component: () => import('../pages/home/home.vue'),
       name: 'tag',
     },
     {
       path: '/category/:category',
-      component: import('../pages/home/home.vue'),
+      component: () => import('../pages/home/home.vue'),
       name: 'category',
     },
     {
       path: '/search',
-      component: import('../pages/home/home.vue'),
+      component: () => import('../pages/home/home.vue'),
       name: 'search',
     },
   ]
 
   // routes.push({
   //   path: '*',
   //   meta: {status: 404},
-  //   component: import('../components/home/not-found.vue'),
+  //   component: () => import('../components/home/not-found.vue'),
   // })
 
   return createRouter({

diff --git a/packages/home/src/store/index.js b/packages/home/src/store/index.js
@@ -2,7 +2,7 @@
  * Created by bangbang93 on 2017/8/25.
  */
 'use strict'
-import * as Vuex from 'vuex'
+import {createStore} from 'vuex'
 import VueFetch from 'vue-fetch'
 import ArticleStore from './article.js'
 import CommentStore from './comment.js'
@@ -12,8 +12,8 @@ import PageStore from './page.js'
 
 export const Fetch = VueFetch()
 
-export function createStore() {
-  return Vuex.createStore({
+export function createRootStore() {
+  return createStore({
     state: {
       origin: '',
       ssrReferer: '',

diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
@@ -76,7 +76,7 @@ export async function bootstrap(): Promise<void> {
       '/article/**': 3600,
     }))
     eApp.get('/admin', express.static(path.join(adminRoot, 'dist')))
-    eApp.get('*', express.static(path.join(homeRoot, 'dist')))
+    eApp.get('*', express.static(path.join(homeRoot, 'dist', 'client')))
   } else {
     const vite = await import('vite')
     const homeViteDevMiddleware = (