使用prerender-spa-plugin预渲染vuejs项目JS无法运行?

Question

我在vuejs项目中使用了prerender-spa-plugin做预渲染,代码如下

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

现在的情况是打包出来貌似没有问题,html里面的内容也确实预渲染了,如图

但是运行项目发现页面引用的css有效,但JS全都无效,包括状态不会变化,dom绑定的事件不能触发等,求大神解答

Answer 1

看一下你预渲染打包出来的html是不是少了id="app"的元素
一般来说main.js里面是挂载到id="app"的元素上的

Answer 2

如 @Zany 所说，需要手动在根组件添加一个id='app'

<div  id='app'>
    <router-view />
</div>

现在你的Vue项目里有两个id='app'，一个在public/index.html里，一个在你根组件里。

Answer 3

我也遇到该问题，打包后，点击事件都无效，css样式也不生效，老铁怎么解决的？