Pre-render the vuejs project using prerender-spa-plugin JS cannot be run?

I used prerender-spa-plugin for pre-rendering in the vuejs project. The code is as follows

new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, "../dist"),
      routes: ["/", "/help/fee", "/help/mnemonic", "/help/agreement", "/help/privacy", "/help/support", "/help/transaction-fail"],
    }),

the current situation is that there seems to be no problem with packaging, and the content in html is indeed pre-rendered, as shown in figure

.

clipboard.png

but running the project found that the css referenced by the page is valid, but the JS is all invalid, including the status will not change, events bound by dom can not be triggered, etc.

Mar.20,2021

check whether your pre-rendered packaged html is missing the element of id= "app"
generally speaking, main.js is


mounted to the element of id= "app".

as @ Zany said, you need to manually add a id='app'

to the root component.
<div  id='app'>
    <router-view />
</div>

now you have two id='app' in your Vue project, one in public/index.html and one in your root component.


I also encountered this problem. After packaging, the click events are invalid, and the css style does not take effect. How did the old man solve it?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e46958-5914d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e46958-5914d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?