Question

我正在尝试为我的应用程序配置prerender-spa-plugin。
需要配置多个页面。

我这样做了，就像documentation（Vue.js 2路由器）

我在webpack.prod.config.js文件中添加了必要的参数

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

const webpackConfig = merge(baseWebpackConfig, {

...

  plugins: [

        // == PRERENDER SPA PLUGIN == //
        new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, '../dist'),
            routes: ['/', '/test'],

            renderer: new Renderer({
                inject: {
                    foo: 'bar'
                },
                headless: false,
                renderAfterDocumentEvent: 'render-event'
            })
        }),
...

也在文件main.js

中

new Vue({
  el: '#app',
  router,
    render: h => h(App),
    mounted () {
        // You'll need this for renderAfterDocumentEvent.
        document.dispatchEvent(new Event('render-event'))
    }
})

现在介绍主要问题。在项目的根（/）中，预渲染正在工作。如果您转到页面/test，则在源代码(ctrl + u)中将显示来自站点根目录（/）的代码。

我无法以任何方式从/test中找到内容。

告诉我我在做什么错，以及如何解决该问题。

谢谢！

UPD：routes.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test from '@/components/test'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/test',
            name: 'test',
            component: test
        }
    ]
})

正确设置prerender-spa-plugin

0 个答案: