我正在使用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>
});
以这种方式解决了这个问题
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中访问数据。