Question

这使我无法将Vue作为视图系统添加到名为Express的Nest框架中。

我认为改编Vue并不那么复杂。这就是为什么我在这里，以便您可以引导我走正确的路，而我不会直接使用Vue。

拳出错误：

    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)

app.controller.ts

import { Controller, Get, Render, Response } from '@nestjs/common';
import { createRenderer } from 'vue-server-renderer';
import { createApp } from './app';
import HelloComponent from './components/Hello';
const context = {data: {}, view: '', componets: {} };

@Controller()
export class AppController {
  @Get()
  getHello(@Response() res): any {
    context.data = { message: 'Esto es un nuevo mensaje 2' };
    context.componets = { 'hello' : HelloComponent };
    const app = createApp(context);
    const renderer = createRenderer();
    renderer.renderToString(app, (err, html) => {
      res.end(html);
    });
  }
}

从'./app'导入{createApp};

import Vue from 'vue';

export function createApp(context: any) {
  return new Vue({
    data: context.data,
    template: fs.readFileSync('./index.html', 'utf-8'),
    components: context.components,
  }).$mount('#app');
}

我尝试的是拥有一个基本模板，然后使用NestJS为每个控制器或路由添加组件。

我不知道这是否可行，是否因为我当前未使用Webpack而被迫使用它。

谢谢！

Answer 1

Vue启动了一个完整的站点，以引导您完成服务器端的渲染并开始运行。 https://vuejs.org概述的过程与之不同。

完整信息可在以下位置找到：https://ssr.vuejs.org/，并且在主指南中大约在标题服务器端呈现https://vuejs.org/v2/guide/ssr.html下的侧边栏导航中途被引用

这是您入门的要点：

npm install express --save

npm install vue vue-server-renderer --save

与您的服务器示例集成

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>The visited URL is: {{ url }}</div>`
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(8080)

渲染Vue实例

// Step 1: Create a Vue instance
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})

// Step 2: Create a renderer
const renderer = require('vue-server-renderer').createRenderer()

// Step 3: Render the Vue instance to HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})

// in 2.5.0+, returns a Promise if no callback is passed:
renderer.renderToString(app).then(html => {
  console.log(html)
}).catch(err => {
  console.error(err)
})

Answer 2

感谢，这不是一个复杂的问题。

您正在尝试使用runtime文件上的.ts构建文件，但不能。这是因为只有*.vue是因为它们是预编译的。

要解决此问题，只需在Webpack中创建一个别名即可。

resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  }
}

这将使您能够访问模板编译器，从而使您可以在未预编译的模板中使用Vue（请阅读：任何不以.vue结尾的文件）

Vue + Express（NestJS）不可能完成的任务，您正在使用仅运行时的Vue构建，其中

2 个答案: