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

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);
     });

可以使用 "Mustache" 语法在 index.template.html 中访问数据，例如 {{ title }}

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

Using vue as a view engine in Sails.js without the frontend

sails.js

vue.js