主要配置代碼：

?

new PrerenderSPAPlugin({staticDir: path.join(__dirname, 'dist'),routes: ['/', '/introduction', '/application', '/download'],postProcess: function (context) {context.html = context.html.replace(/<\/head>/i,`<script>document.addEventListener("DOMContentLoaded", function (event) {document.getElementById('landing').style.display = 'none';})</script></head>` )return context}}),

?

?

html

?

<div id="landing"><img id="landing-img" src="/loading-bars.svg" alt="landing"></div>

?

css

?

#landing {position: fixed;left: 0;top: 0;right: 0;bottom: 0;background: #fff;z-index: 3000;}#landing-img {position: absolute;width: 60px;left: 50%;top: 40%;margin-left: -20px;}

?

main.js

?

new Vue({router,store,render: h => h(App),mounted () {if (process.env.NODE_ENV !== 'production') {document.getElementById('landing').style.display = 'none'}} }).$mount('#app')

?

轉載于:https://www.cnblogs.com/savokiss/p/9457176.html

總結

以上是生活随笔為你收集整理的Vue 使用 prerender-spa-plugin 添加loading的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。