SSR в окружении PHP и Vue.js

109
17 марта 2021, 19:30

Стоит жирная задача реализовать 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

READ ALSO
Отправка GET POST запроса android

Отправка GET POST запроса android

Нужна помощьНе могу за коннектится сервером

113
HQL: Can't resolve symbol

HQL: Can't resolve symbol

Подскажите пожалуйста, какой синтаксис у HQL запроса, который возвращал бы объекты из базы, при определённом условии

86
Сортировка Comparator по String и int

Сортировка Comparator по String и int

Нужно, чтобы компаратор отсортировал массив по Типу(Type) и Цене(Price)

110
Падает deploy через jenkins - ERROR: Exception when publishing, exception message [Exec exit status not zero. Status [1]]

Падает deploy через jenkins - ERROR: Exception when publishing, exception message [Exec exit status not zero. Status [1]]

Скорее всего проблема WildflyЛог jenkins с настройками:

201