still haven't figured it out. But I decided to try with a fresh vue-cli project (rc3) and that works fine

you might like to use this repo to add another example

https://github.com/vesper8/vue-cli-3-prerender-spa-plugin-demo

Would still appreciate your thoughts on what might be causing this.. I will report back if I figure it out as well

ok.. I found the guilty party.. it's this line

  baseUrl: process.env.npm_lifecycle_event === 'serve' ? '/' : '/v3',

I tried both paths separately

baseUrl: '/', // works
baseUrl: '/v3', // doesn't work

This is pretty problematic... but let's see if I can work around it

Yeah, I haven't figured out the ideal way to deal with webpack's various output modifying settings. However, you might also want to configure the renderer like so:

new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, 'dist'),
  routes: [
    '/',
    '/about'
  ],
  renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
    renderAfterTime: 5000, // Wait five seconds for your app to start before rendering the page.
    headless: false // Let's you watch what's happening.
  })
}),

If anyone has figured it out and can describe a workaround, that would be super awesome!

I also have found this is a problem to use baseUrl. I've tried prepending all my routes with the baseUrl but that doesn't do it. Plus I've tried a bunch of other stuff but still can't find a workaround.

I've just had to do away with the dependency of the baseUrl.. which was a lot of work but made me realize this was the direction I should have taken all along.

Previously I had my vue application served through a catchall route in Laravel which is why I needed all my files to load from the /public/baseUrl/ folder in my Laravel installation. Now I've completely decoupled by front-end from my back-end and no longer need to generate my files in a subfolder. It's probably different for you but.. chances are there's a way you can get around needing to use a subfolder

Hey thanks for the explanation @vesper8.

I think you're right, a URL prefix is not ideal. But in my case, i was not able to change that. I found a workaround by adding this to my vue router: base: process.env.VUE_APP_PATH_PREFIX ? process.env.VUE_APP_PATH_PREFIX : '/',

Now the prerender works properly, but the only downside was that I have to manually move some assets around after I build.

找到方法了
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',
        ],
      }),
    ],
  },
};

@Eunknight 老哥，你这是什么模板啊，webpack-simple么？

@Eunknight 可以参考一下我的做法

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 {
      // ...
    }
  }
}

@SHERlocked93 看这个issue标题，vue-cli v3 模板.

Anyone else having issues with vue <router-link and prerender-spa-plugin in Vue-cli v3.

In Vue History mode
The following -
welcome
redirects to /welcome - seems to ignore history mode and act as an anchor tag..

welcome
Does nothing.

If I remove prerender-spa-plugin from vue.config.js then all works as expected.

• my routes appear to be generated fine though in dist

Hi guys, I'm using this with angular 6 but it seems that is not working there's no html code generated in specified routes...

@BruneXX How are you dispatching the render event? I haven't used Angular 6 so I'm not sure exactly how that would work.

Hi @tribex I'm using this configuration below:

new PrerenderSPAPlugin({
        // Required - The path to the webpack-outputted app to prerender.
        staticDir: path.join(__dirname, '../dist'),
        // Required - Routes to render.
        routes: [ '/' ]
      })

But the code generated is the same as I got with the previous configuration, I can't see the "home" page html code generated after plugin configuration...

Below tag I've only scripts and no html content..

@BruneXX It looks like you haven't set any render triggers. The basic usage example only works for basic pages with synchronous JavaScript.

Try something more like this:

    new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.join(__dirname, 'dist'),

      // Required - Routes to render.
      routes: [ '/' ],

      // Renderer configuration
      renderer: new Renderer({
        // Wait to render until the specified event is dispatched on the document.
        // eg, with `document.dispatchEvent(new Event('render-page'))`
        renderAfterDocumentEvent: 'render-page',
      })
    })

You'll then need to fire document.dispatchEvent(new Event('render-page')) somewhere in your Angular app once it loads.

Hi @tribex Excellent, I'll do that and I'll let you know the results soon! thanks a lot!

@BruneXX One other thing, it looks like Angular (unlike Vue and React) doesn't support DOM hydration yet, so you may see a white flash between the time the prerendered page loads and when the JS finishes running. There's no real way around that, unfortunately.

See: angular/angular#13446

@tribex I've got the same result as before with the dispatchEvent.. I don't know why is not working..

I found a solution that works for me. It's not pretty, but it's working for me.

First, set the base option in your router:

const router = new Router({
  base: "/some/path/to/somewhere/",
  ...
});

export default router

Next, in your vue.config.js file, set the baseUrl to the desired path, and the outputDir accordingly:

module.exports = {
  baseUrl: "/some/path/to/somewhere/",
  outputDir: "dist/some/path/to/somewhere/",
  ...
}

Finally, configure the SPA plugin like so:

new PrerenderSpaPlugin({
  staticDir: path.join(__dirname, "dist"),
  indexPath: path.join(__dirname, "dist/some/path/to/somewhere/index.html"),
  ...
});

As far as I can tell, all these settings really do is match up the directory structure with your routes (I'm barely knowledgeable about this stuff). To deploy your application, grab your contents from dist/some/path/to/somewhere. For example, if you were building a Docker image based on NGINX you'd do something like:

FROM nginx:latest

...

COPY  dist/some/path/to/somewhere /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

Hope this helps.

@Eunknight 老哥厉害，我一开始一直在修改routes里面的路径，后面发现是资源路径不对，却不知如何修改。终于，缘分让我们相聚:satisfied:

Anyone else having issues with vue <router-link and prerender-spa-plugin in Vue-cli v3.

In Vue History mode
The following -
welcome
redirects to /welcome - seems to ignore history mode and act as an anchor tag..

welcome
Does nothing.

If I remove prerender-spa-plugin from vue.config.js then all works as expected.

• my routes appear to be generated fine though in dist

yep I have seen a solution just now . i seems to give route-to a '/' ,and $route.push('/route') instandsof $route.push('rout')
sry for my english

The plugin provides the solution, prerender-spa-cdn-plugin.
Example: vue-cli3 with PUBLIC_PATH=//cdn.abcd.com

const PrerenderSpaCdnPlugin = require('prerender-spa-cdn-plugin')
// ...
new PrerenderSpaCdnPlugin({
  staticDir: path.join(__dirname, 'dist'),
  routes: ['/', '/about'],
  rendererOptions: {
    maxConcurrentRoutes: 1,
    injectProperty: '__PRERENDER_INJECTED',
    inject: {
      rendering: true
    }
  }
})

找到方法了 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',
        ],
      }),
    ],
  },
};

厉害厉害