Использование vue в качестве движка просмотра в Sails.js без внешнего интерфейса
Я настраиваю сервер электронной почты с помощью Sails.js (без внешнего интерфейса), и мне нужна помощь с импортом файла vue в мой контроллер или с настройкой файла getRenderFn в файле View.js для рендеринга моего файла vue.
Я пробовал пару вещей, и ничего не работает. Первое, что я попробовал, — изменить расширение в моем файле View.js на vue, но этого недостаточно. Мне также нужно написать функцию рендеринга, и я не знаю, как это сделать.
Это привело меня ко второму подходу в моем контроллере, чтобы импортировать vue и использовать библиотеку под названием vue-сервер-рендерер. Я возвращаю 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>
});
Ответы 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);
});
Доступ к данным можно получить в index.template.html, используя синтаксис «Mustache», например {{ title }}