ssr无法在win10使用_Nuxt SSR中使用WangEditor爬坑—把对象暴打出原型
????????記錄一下Nuxt SSR中使用WangEditor的問題，這也體現(xiàn)JS原型在架構(gòu)場景下的重要性。
前提須知：
Nuxt SPA 按照文檔去使用WangEditor插件是沒有問題的，因為頁面渲染是在前端層面執(zhí)行的；
Nuxt SSR 要區(qū)分前、后端兩個時刻，后端渲染的時候是不能使用window對象的；
Nuxt 框架可以設(shè)置plugins只作用于前端(ssr:false);
在Nuxt SSR 也不能使用script src 的方式加載JS庫；
可以利用導航守衛(wèi)，相當于攔截器，每次頁面路徑變化都會自動觸發(fā)相應的函數(shù)；
使用Nuxt SSR 作為項目框架其實也是為了SEO和前后端分離兩者兼得；
????????近期Nuxt SSR項目需要使用富文本編輯器，因為習慣了WangEditor，所以就想把WangEditor集成到Nuxt SSR架構(gòu)中，但過程中是各種崩潰，接下來是實驗流程：
只要在Nuxt框架中使用都要先安裝模塊：
npm i wangeditor --save按照WangEditor文檔中的使用方式：
import E from 'wangeditor'const editor = new E('#div1')// 或者 const editor = new E( document.getElementById('div1') )editor.create()這種方式在SPA模式下的Nuxt中使用是一切順利，但是在SSR中必須崩，因為后端nodejs沒有window對象，所以根本無法編譯import 引入的前端插件；
?各種上網(wǎng)找解決方案，都是vue-quill-editor集成的解決方案，使用方式上與ElementUI 集成方案一樣：在插件中使用Vue.use()載入插件到Vue中，然后將插件配置到nuxt.config.js的plugins中,并且設(shè)置ssr:false：??
import Vue from 'vue';import wangeditor from 'wangeditor';Vue.use(wangeditor);console.log("Vue:",Vue);?//打印測試結(jié)果還是崩，對比打印結(jié)果,發(fā)現(xiàn)ElementUI正常加入，打印結(jié)果出現(xiàn)ElementUI的常用標簽，如下圖：
wangeditor這邊的結(jié)果如下圖：
究其原因應該是WangEiditor中某些語法寫得不規(guī)范，導致不被Vue.use()載入；
思來想去，其實不管是script src 還是 Vue.use( )原理都是將JS模塊載入內(nèi)存，然后在使用的地方實例化JS模塊，就能正常使用了，而script src方式引入的庫就相當于在window對象原型上加入模塊變量，又想到導航守衛(wèi)是可以設(shè)置只在前端執(zhí)行，而且在頁面跳轉(zhuǎn)到達后都自動觸發(fā)afterEach，于是可以這樣( /plugins/weditor.js代碼)：
import?E?from?"wangEditor"export default ({ app }) => { app.router.afterEach(() => { console.time();????????//在Window原型中設(shè)置wangEditor Window.prototype.wangEditor = E; console.timeEnd(); });}nuxt.config.js的plugins配置代碼：
???plugins:?[ {src:'@/plugins/weditor',ssr:false} ],?頁面上也只能在vue掛載完成后的mounted生命周期中實例化插件,因為在mounted之前的生命周期函數(shù)都不能使用window:
<template> <div> <h1>wangEditor編輯器的使用h1> <div id="div1"> <p> 歡迎使用 <b>wangEditorb> 富文本編輯器 p> div> div>template><script>export default { mounted: function() { console.log("wangEditor:", wangEditor); // var editor = new wangEditor("#div1"); // // 或者 const editor = new E( document.getElementById('div1') ) editor.create(); }};script><style>style>?最后完成：
總結(jié)：導航守衛(wèi)中加入window原型是對每個頁面都會有作用，就相當于在全局上內(nèi)存上設(shè)置了插件模塊，經(jīng)過測試，頁面加載可能會因此延遲0.03~0.05毫秒，其實可以忽略不計，如果不想每個頁面都載入插件，其實是可以配置需要使用插件的頁面路徑配置，然后通過分支結(jié)構(gòu)判斷頁面路徑是否要把插件模塊加入window原型的。
部分素材來源網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系刪除
《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的ssr无法在win10使用_Nuxt SSR中使用WangEditor爬坑—把对象暴打出原型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 合并两个无序数组java_Java实现十
- 下一篇： 10kv开关柜价格_什么是10KV开闭所