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

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.

Javascript html vue.js

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?

Previous: How to realize facebook google login on mobile web page

Next: The routing problem of the intermediate agent layer built with webpack + koa2 + react?

The home page needs to call multiple API to get data and render the view. How to optimize it?
For the project of vue, there are many data modules on the home page. You need to call different API to get the data, and the request will slow down the loading of the first screen. How to optimize it? ...

Optimize javascript html vue.js

Mar.02,2021
Vue.js routing query
is the path wrong? solved: because the image path is wrong ...

Javascript html vue.js webpack

Mar.02,2021
How to add Click events dynamically by vue
there is no effect after clicking, the console does not respond, and the click event does not take effect. Code section: .list(v-for="(i,n) in lists" :key="n" @click="change(i.url)") {{i.name}} corresponding event: cha...

Javascript html vue.js webpack

Mar.02,2021
The problem of introducing .js files into .vue files
I want to introduce a complete js file into a vue file. So I don t think it s appropriate to use import to introduce all the content at once. then I tried two more methods (I don t know if there is one) 1. < script src= "type= " text javascript ...

Javascript html vue.js webpack

Mar.07,2021
How to open the local folder in the vue project?
on my page, I want to see this picture under this path (please don t say pass img, please read the title), a tag clearly. I tried it, but it didn t work. < input type= "file " > can only display file names on the page ...

Javascript html vue.js

Mar.11,2021
How to make PC side highly compatible
how can the PC end be highly compatible? Generally speaking, our PC side only does width compatibility, if we want to do different resolutions, the display is the same. How do you do that? Is it possible to use rem?? background management system written...

Javascript html vue.js

Mar.28,2021
How to do the article review function at the front end
problem description now it is time to develop a background article review function, which is required to completely restore the article. What is returned at the back end is a piece of html code. The article pulled from the Internet has an inline style...

Javascript html vue.js element-ui

Jun.25,2021
If you ask for help from the interview questions, the test is correct in the test environment, and a blank page will appear in the formal environment. How should you troubleshoot it?
during the interview, I encountered the following questions is tested correctly in the test environment, and a blank page appears in the formal environment. Because it is packaged in a framework, the code is compressed and breakpoints cannot be used ...

Javascript html vue.js react.js front-end

Aug.19,2021
Multiple upload components in element-ui cannot get the corresponding values, and index keeps reporting errors
topic description ...

Javascript html vue.js

Sep.16,2021
How does vue return the corresponding value?
< div class= "a " data-id= 0 > {{state}} < div > < div class= "a " data-id= 1 > {{state}} < div > < div class= "a " data-id= 2 > {{state}} < div > 0 Shipping 1 has been shipped 2 refund div is looped out of the background data. Ho...

Javascript html vue.js

Sep.17,2021
Get the ref of the current element in the vue click event
requirements: there are multiple Input input boxes in the form, each of which is input1, input2, input3. After the input1 input is complete, press the Enter key to automatically jump to input2. Similarly, press Enter to jump to input3 after input2 has b...

Javascript html vue.js

Sep.28,2021
How to realize the function of customizing and adding template for Mall Decoration
here is a mall decoration function, you can add different functional types of components, components can appear in different locations according to the location of the plus sign, and click to save and refresh. No, no, no. Like the natural flow, the posit...

Javascript html vue.js

Jan.21,2022
How to solve the problem that the initial rendering of the vue element-ui table component header does not occupy the whole row?
the vue element-ui table component header does not occupy the entire row in the initial rendering. The actual application scenario is what happens when switching different tables through the tab tab component. How to solve this problem? The following fi...

Javascript html vue.js element-ui

Feb.15,2022
Webapp icon long press has shadow, excuse me, what is the situation, is it a copy?
my cell phone junk picture is a little blurry. But there is an obvious shadow in the middle navigation bar at the bottom. What is the reason for this? is there a solution (it only appears when it is pressed for a long time and then disappears in a second...

Javascript html vue.js html5

May.12,2022