vue-cli v3, can't get it to work.. no errors but pre-rendered routes don't contain static html

Hi there… I’ve been trying to follow the examples but I can’t seem to get it to work.

This is my vue.config.js

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');

module.exports = {
  baseUrl: process.env.npm_lifecycle_event === 'serve' ? '/' : '/v3',
  outputDir: 'dist',
  lintOnSave: true,
  configureWebpack: {
    resolve: {
      modules: [path.resolve(__dirname, 'src/spark'), 'node_modules'],
      alias: {
        vue$: 'vue/dist/vue.js',
      },
    },
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: [
          '/',
          '/about,
        ],
      }),
    ],
  },
};

This file contains the only change I’ve made to my app… if I’m supposed to make other changes… then sorry… it seemed as though everything else is optional.

When I do npm run build, I don’t get any errors or warnings, it does generate an about folder with an index.html in it… as well as an index.html in the root. But those don’t contain any of the static html from the view component.

Perhaps one thing that might be at play is how I import my components in the router and in the views. I use dynamic imports like this (my about route in my vue-router):

I am using history mode by the way

{
    name: 'about',
    path: '/about',
    component: () => import('@/views/About'),
    meta: {
      title: 'About Us',
      description: "Learn about us",
    },
  },

And through my application I use dynamic imports like this too

But to be honest I’ve done some tests where I just do a regular import and it doesn’t make a difference

I’m pretty lost as to what I might be missing… help would be much appreciated!

Even though the next two questions will make more sense once I actually get this to work… I thought I might ask them now… first… is it required to have a trailing slash in order to load the pre-rendered html? And second… these routes I want pre-rendered, such as the about page, they can be accessed both while my users are logged in and logged out… and the header (menu) is different whether they are logged in or out. I really only care about pre-rendering the page for logged out users however… because Google can’t reach the logged-in page and once the user is logged in the SPA loads pages super fast anyway. Is there something I should do to take this into account?

Let me know if you need me to share anything else. Many Thanks!!

[Eunknight]

找到方法了 prerender-spa-plugin 在dist目录起了一个服务 资源的引用路径是 根目录/baseUrl/* 但是实际上资源的路径为 根目录/* 所以prerender-spa-plugin无法找到资源 不能预渲染 我们把资源输出目录改为 dist/baseUrl 入口index.html 改为 dist/baseUrl/index.html prerender-spa-plugin 输出改为 dist/baseUrl

建议添加 process.env.NODE_ENV === 'production' 判断，不然开发时时影响性能。

google translate:

Found a way

Prerender-spa-plugin started a service in the dist directory The reference path for the resource is root/baseUrl/* But actually the path to the resource is root/* So prerender-spa-plugin can’t find resources Cannot prerender We changed the resource output directory to dist/baseUrl Change the index.html to dist/baseUrl/index.html The prerender-spa-plugin output is changed to dist/baseUrl

It is recommended to add process.env.NODE_ENV ==='production' to judge, otherwise development will affect performance.

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
module.exports = {
  baseUrl: '/testBaseUrl',
  outputDir: path.join(__dirname, 'dist/testBaseUrl'),
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        outputDir: path.join(__dirname, 'dist/testBaseUrl'),
        indexPath: path.join(__dirname, 'dist', '/testBaseUrl/index.html'),
        routes: [
          '/',
          '/about',
          '/contact',
        ],
      }),
    ],
  },
};

[volodalexey]

If you use chainWebpack this might help in vue.config.js:

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config
        .plugin('prerender-spa-plugin')
        .use(PrerenderSPAPlugin, [
          {
            staticDir: path.join(__dirname, 'dist'),
            routes: ['/'], // List of routes to prerender.
            renderer: new PrerenderSPAPlugin.PuppeteerRenderer() // without this line does not work in my case
          }
        ])
    } else {
      // ...
    }
  }
}