记录使用Vue相关API开发项目时遇到的问题难点整理（不定时更新）

本文为整理记录本人从18年初开始上手使用Vue之后，针对项目中业务需求所遇到到的各类问题及难点的解决方法整理😁。

一、keep-alive组件缓存：

<!--这里是须要缓存的-->
<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。
针对业务上的一些全局公共组件，好比在一个被缓存的组件引入此公共组件，同时要绑定了一个事件，

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

那么退出组件时要注销该事件，

destroyed: function() {
    window.removeEventListener('click', function, false);//离开的时候注销事件
},

同时也要在deactivated里执行一次注销事件，由于被缓存的组件不会被销毁。

二、Vue构建的单页应用，假设情景是从列表页跳转到详情页，若是业务要求必须打开新窗口，即用target="_blank"。此时若是两个窗口页面之间都有用到vuex state数据的话，好比共享同一个id数组，那么列表页修改了state数据后，详情页就不能实时更新state数据。此时只能使用localStorage来实现效果了。

三、vue-meta，更优雅的管理头部标签（动态设置meta：keywords，description和title标签，有利于SEO，能够和prerender-spa-plugin预渲染搭配使用。）
参考：https://vue-meta.nuxtjs.org/f...
http://www.zhuyuwei.cn/2018/v...

四、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重写的,
            }
        }
    }
},