Разъяснение с использованием vuejs, предварительного рендеринга и laravel -микса - PullRequest
Новая
       32

Разъяснение с использованием vuejs, предварительного рендеринга и laravel -микса

0 голосов
/ 26 февраля 2020

Я ищу разъяснения / решения / предложения для следующих требований.

Я использую laravel -микс для целей сборки

Структура папок моего проекта

enter image description here

У меня есть stati c index. html, about. html, в котором vue компонент загружен через приложение. js

pages / index. html

<body>
<div id="app">
    <home /> <!--vue component--!>
</div>
<script src="js/app.js" defer></script>
</body>

pages / about. html

<body>
<div id="app">
    <about /> <!--vue component--!>
</div>
<script src="js/app.js" defer></script>
</body>

js / app. js -> запись js для набора веб-пакетов 

import 'bootstrap/dist/js/bootstrap.bundle.js';
window._ = require('lodash');
window.Vue = require('vue');
Vue.component('home', require('./component/home.vue'));
Vue.component('about', require('./component/about.vue'));
const app = new Vue({
     el: '#app',
     methods: {
     }
});

webpack.mix. js

const mix = require('laravel-mix');
mix.js('js/app.js', 'public/js')
.copy('pages/', 'public/');

При данной настройке я могу просматривать http://domain.localhost/index.html http://domain.localhost/about.html

В целях SEO я хочу предварительно отрендерить файл сборки в папке publi c. Я попытался использовать HtmlWebpackPlugin и PrerenderSpaPlugin и смог предварительно отрендерить vue компоненты. Но я сталкиваюсь с некоторыми проблемами.

Ниже приведен webpack.config. js для конфигурации перед рендерингом

webpack.config. js

module.exports.plugins.push(
    new HtmlWebpackPlugin({
        template: 'pages/home.html',
        inject: true
    }),
    new HtmlWebpackPlugin({
        template: 'pages/contact.html',
        inject: true
    })
);

const PrerenderSpaPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSpaPlugin.PuppeteerRenderer;

module.exports.plugins.push(
    new PrerenderSpaPlugin({
        indexPath: path.join(__dirname, 'pages', 'home.html'),
        staticDir: path.join(__dirname, 'public'),
        routes: ['/'],
    }),
    new PrerenderSpaPlugin({
        indexPath: path.join(__dirname, 'pages', 'contact.html'),
        staticDir: path.join(__dirname, 'public'),
        routes: ['/contact'],
    })
);

Проблемы:

  1. Предварительно отрендеренные / собранные html файлы внутри publi c папка vue Событие щелчка компонента не запускается.
  2. Моя структура каталогов сборки выглядит следующим образом

enter image description here

Надеюсь, что моя проблема ясна, пожалуйста, дайте мне знать, если требуются дополнительные разъяснения.

Дайте мне знать, является ли мой подход правильным или какова лучшая практика для следите за созданием stati c сайтов?

Примечание: я не хочу использовать vue -router. Я хочу использовать stati c html и загрузить все компоненты vue через приложение. js

...