Стоит жирная задача реализовать SSR (Server-Side Rendering) в проекте, но постоянно вылазят разные трудности.
В первую очередь мне нужен SSR без вмешательства сервера Node.js, по документации на Vue, такое возможно, и тут показано как.
Теперь главная проблема..
Постоянно отображаются ошибки window is not defined
и document is not defined
. Я понимаю почему это происходит и в своём коде уже перекрыл доступ к window
и document
через SSR. Но проблема в том что данные ошибки отображаются из-за бесчисленного кол-ва используемых библиотек, и даже из файла самого vue.js
Ничего стоящего не могу найти в интернете. Буду рад любой помощи.
EDIT1:
Исправил проблему с библиотеками и с файлом vue.js.
Теперь выдает ошибку Error: render function or template not defined in component
Строка указывает на этот фрагмент кода:
renderVueComponentToString(app.app, (err, res) => {
if (err) throw new Error(err); // А именно на эту строку
print(res);
});
Я БУДУ УЖЕ БЛАГОДАРЕН ХОТЯ БЫ РАБОЧЕМУ ПРИМЕРУ
webpack.build.config.js
const merge = require('webpack-merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const baseWebpackConfig = require('./webpack.base.conf');
const PATHS = baseWebpackConfig.externals.paths;
const buildWebpackConfig = merge(baseWebpackConfig, {
mode: 'production',
target: 'node',
node: undefined,
externals: undefined,
entry: {
server: PATHS.src + '/js/entry-server.js'
},
optimization: {
splitChunks: false,
minimizer: [
new UglifyJsPlugin({
include: /\.min\.js$/,
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 8,
mangle: true,
output: {
comments: false,
},
},
sourceMap: true
})
]
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loader: {
scss: 'vue-style-loader!css-loader!sass-loader'
},
extractCSS: false,
optimizeSSR: false,
}
}
]
}
});
module.exports = new Promise((resolve, reject) => {
resolve(buildWebpackConfig);
});
entry-server.js
import { createApp } from './main';
const app = createApp();
renderVueComponentToString(app.app, (err, res) => {
if (err) throw new Error(err);
print(res);
});
main.js
import '../sass/main.sass';
import Vue from 'vue/dist/vue.min';
// Импорт библиотек
// Импорт компонентов
Vue.config.productionTip = false;
export function createApp() {
Vue.component('component1', Component1);
Vue.component('component2', Component2);
Vue.component('component3', Component3);
const app = new Vue({
components: {
component4: Component4,
component5: Component5
},
data: {
// Ненужный код
},
created() {
if (!this.isSSR) {
// Ненужный код
}
},
mounted() {
if (!this.isSSR) {
// Ненужный код
}
},
computed: {
isSSR() {
return typeof window === 'undefined' || typeof document === 'undefined';
},
// Ненужный код
},
methods: {
// Ненужный код
},
});
return { app };
}
SSR РЕАЛИЗОВЫВАЛ С ЭТОГО ПРИМЕРА: https://github.com/delphinpro/vue-ssr-with-php-v8js
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Подскажите пожалуйста, какой синтаксис у HQL запроса, который возвращал бы объекты из базы, при определённом условии
Нужно, чтобы компаратор отсортировал массив по Типу(Type) и Цене(Price)
Скорее всего проблема WildflyЛог jenkins с настройками: