記錄使用Vue相關API開發項目時遇到的問題難點整理(不定時更新)

本文爲整理記錄本人從18年初開始上手使用Vue之後,針對項目中業務需求所遇到到的各類問題及難點的解決方法整理😁。

一、keep-alive組件緩存:html

<!--這裏是須要緩存的-->
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<!--這裏不會被緩存的-->
<router-view v-if="!$route.meta.keepAlive"></router-view>

keep-alive緩存組件有兩個生命週期鉤子函數:activated(組件激活時調用)、deactivated(組件停用時調用),對應created、destroyed。
針對業務上的一些全局公共組件,好比在一個被緩存的組件引入此公共組件,同時要綁定了一個事件,vue

mounted() {
    this.$nextTick(() => {
        window.addEventListener('click', function, false);
    })
},

那麼退出組件時要註銷該事件,git

destroyed: function() {
    window.removeEventListener('click', function, false);//離開的時候註銷事件
},

同時也要在deactivated裏執行一次註銷事件,由於被緩存的組件不會被銷燬。github

二、Vue構建的單頁應用,假設情景是從列表頁跳轉到詳情頁,若是業務要求必須打開新窗口,即用target="_blank"。此時若是兩個窗口頁面之間都有用到vuex state數據的話,好比共享同一個id數組,那麼列表頁修改了state數據後,詳情頁就不能實時更新state數據。此時只能使用localStorage來實現效果了。vuex

三、vue-meta,更優雅的管理頭部標籤(動態設置meta:keywords,description和title標籤,有利於SEO,能夠和prerender-spa-plugin預渲染搭配使用。)
參考:https://vue-meta.nuxtjs.org/f...
http://www.zhuyuwei.cn/2018/v...api

四、Vue SPA項目SEO優化之預渲染Prerender-spa-plugin,https://github.com/chrisvfrit...
相關bug:
圖片描述
此報錯解決方法:
參考:https://github.com/chrisvfrit...跨域

//在此處添加args參數
renderer: new Renderer({
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
})

圖片描述

此報錯解決方法:
參考:https://github.com/chrisvfrit...數組

//此參數是build完成後自動打開chromium瀏覽器,方便調試,默認是true(不自動打開chromium)false是自動打開,但若是服務器是無界面的,好比centOS,ubantu,則會報錯上面信息,刪除headless參數便可。
renderer: new Renderer({
    headless: false,
})

預渲染build時的跨域配置瀏覽器

server: {
    // Normally a free port is autodetected, but feel free to set this if needed.
    port: 9292,
    proxy:{
        '/api': {
            target: 'https://www.xxxxxxx.com',
            changeOrigin: true, //是否跨域
            pathRewrite: {
                '^/api': 'api' //須要rewrite重寫的,
            }
        }
    }
},
相關文章
相關標籤/搜索