Question

我正在使用Sails.js（无前端）设置电子邮件服务器，我需要在控制器中导入vue文件或在View.js文件中设置getRenderFn来呈现我的vue文件的帮助。

我尝试了几件事，但没有任何效果。我尝试的第一件事是将View.js文件中的扩展名更改为vue，但这还不够。我也必须编写一个渲染函数，但我不知道该怎么做。

这导致我在控制器中采用了第二种方法来导入vue并使用名为vue-server-renderer的库。我正在返回HTML并通过电子邮件发送。问题是我将有几个模板，因此我的控制器会很混乱，因此我想将其分解为不同的文件。我创建了template.vue文件，并尝试将其导入控制器中，但是遇到script is undefined错误，因此我需要一种将vue文件加载到控制器中的方法。

module.exports = {
   send: function (req, res) {
     // change the type of body from obj to JSON so it's easy to parse
     let parsedBody = JSON.parse(JSON.stringify(req.body));
     let emailSubj;
     let emailTemplate;
     const jsdom = require("jsdom");
     const { JSDOM } = jsdom;
     const dom = new JSDOM(`<!DOCTYPE html><div class="vue-target">Hello</div>`);

     const Vue = require('vue');
     const templateVue = require("../../views/template.vue");
     const Constructor = Vue.extend(templateVue);
     const getTemp = new Constructor({
         propsData: {
           body: parsedBody
         },
       render: h => h("../../views/template.vue"),
       }).$mount(dom.window.document.querySelector(".vue-target"));
     sails.log(getTemp);
      // create renderer
     const renderer = require('vue-server-renderer').createRenderer();
     let test;
     // Render the Vue instance to HTML
     renderer.renderToString(getTemp, (err, html) => {
       test = html;
       if (err) throw err;
       sails.log(html)
       // => <div data-server-rendered="true">Hello World</div>
     });

Answer 1

以这种方式解决了问题

const Vue = require('vue');
     const renderer = require('vue-server-renderer').createRenderer();
     const app = new Vue({
       data: {
         title: 'this is a test title',
         Name: 'Name',
         Sender: 'Someone'
       },
       template: require('fs').readFileSync('./index.template.html', 'utf-8')
     });
     let sent;
     let context = {
       title: 'this is a test title',
       Name: 'Name',
       Sender: 'Someone'
     };
     renderer.renderToString(app, context, (err, html) => {
       if (err) {
         res.status(500).end('Internal Server Error');
         return
       }
       sent = html;
       sails.log(sent);
     });

可以使用{{title}}之类的“ Mustache”语法在index.template.html中访问数据。

在没有前端的Sails.js中使用vue作为视图引擎

1 个答案: