VueJs：服務器端呈現和Typescript出錯

Question

我正嘗試使用服務器端呈現（SSR）和Typescript構建堆棧。 一切似乎都很好，但我得到了錯誤：TypeError: Cannot read property 'render' of undefined。 以下是完整的堆棧跟蹤：

TypeError: Cannot read property 'render' of undefined 
    at normalizeRender (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/vue-server-renderer/build.js:6621:19) 
    at render (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/vue-server-renderer/build.js:6840:5) 
    at Object.renderToString (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/vue-server-renderer/build.js:6871:9) 
    at /Users/shoun/Documents/repositories/vuejs-ssr-typescript/dist/server.js:16:14 
    at Layer.handle [as handle_request] (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/layer.js:95:5) 
    at next (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/route.js:137:13) 
    at Route.dispatch (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/route.js:112:3) 
    at Layer.handle [as handle_request] (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/layer.js:95:5) 
    at /Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/index.js:281:22 
    at param (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/index.js:354:14) 
TypeError: Cannot read property 'render' of undefined 
    at normalizeRender (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/vue-server-renderer/build.js:6621:19) 
    at render (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/vue-server-renderer/build.js:6840:5) 
    at Object.renderToString (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/vue-server-renderer/build.js:6871:9) 
    at /Users/shoun/Documents/repositories/vuejs-ssr-typescript/dist/server.js:16:14 
    at Layer.handle [as handle_request] (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/layer.js:95:5) 
    at next (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/route.js:137:13) 
    at Route.dispatch (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/route.js:112:3) 
    at Layer.handle [as handle_request] (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/layer.js:95:5) 
    at /Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/index.js:281:22 
    at param (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/express/lib/router/index.js:354:14) 

這裏是我的服務器配置：

import * as express from 'express'; 
import * as path from 'path'; 
import * as VueRender from 'vue-server-renderer'; 
import * as fs from 'fs-extra'; 
import app from './assets/app'; 
declare var __dirname; 

// Get the HTML layout 
const layout = fs.readFileSync(path.join(__dirname, 'index.html'), 'utf8'); 

// Create a renderer 
const renderer = VueRender.createRenderer(); 

let server = express(); 

server.get('/hello', function (req, res) { 
    res.send('Hello World!'); 
}); 

server.use('/assets', express.static(path.join(__dirname, 'assets'))); 

// Handle all GET requests 
server.get('*', function (request, response) { 
    // Render our Vue app to a string 
    renderer.renderToString(
     // Create an app instance 
     app(), 
     // Handle the rendered result 
     function (error, html) { 
      // If an error occurred while rendering... 
      if (error) { 
       // Log the error in the console 
       console.error(error); 
       // Tell the client something went wrong 
       return response 
        .status(500) 
        .send('Server Error') 
      } 
      // Send the layout with the rendered app's HTML 
      response.send(layout.replace('<div id="app"></div>', html)) 
     } 
    ) 
}); 

let port = 4500; 
server.listen(port,() => { 
    console.log(`App listening on ${port}`); 
}); 

你可以找到我的github存儲庫的源代碼：https://github.com/sichida/vuejs-ssr-typescript。 我真的可以使用一些幫助，因爲我卡住了...

非常感謝！

Answer 1

我檢查你的回購和問題實際上是文件src/assets/app.ts中，在createApp功能你返回ComponentOptions類型的對象，但renderToString需要Vue類型的對象。

實際上，它可以比你有什麼權利現在簡單得多：

import * as Vue from 'vue'; 

let createApp = function() { 
    return new Vue({ 
    props: ['message'], 
    template: '<span>{{ message }}</span>', 
    }); 
}; 
export default createApp; 

就是這樣，你只需要返回一個新Vue實例。

Answer 2

我發現，爲了Vue公司呈現的東西，它需要這些一個：

• render財產
• template財產
• 作爲$mount()版

---

N如果你嗷嗷喜歡我，你有你的HTML是這樣的：

<div id="app"> 
    <navbar></navbar> 
    ... 
</div> 

和用於安裝它像app.$mount('#app')，你需要做的是：

• 移動<div id="app">完全以其內容爲一個組件（可能稱爲App.vue？）
• 將render屬性添加到Vue實例中，如render: h => h(App)其中App是您剛剛創建的組件
• 直接使用該組件的SSR，即從entry-server.js或任何
• 做$mount返回它該實例中entry-client.js水合