首页 > Web开发 > 详细

webpack打包vue项目 keep-alive不生效

时间:2020-02-24 12:59:41      阅读:82      评论:0      收藏:0      [点我收藏+]

项目会使用tab功能,进而需要对页面数据进行缓存。在本地开发的时候,能够正常缓存,但是在使用webpack打包后,上传至服务器发现缓存失效,导致有些业务出错。

路由代码:

module.exports = (file: string) => {
  use strict;

  return () => import(`@/views/${file}`);
};
const getComponent = require(`./import_${process.env.NODE_ENV}`);
{
    path: /customers,
    name: Customers,
    component: getComponent(customers/index),
    permission: true,
    meta: { key: Customers },
    children: [
      {
        path: baseInfo,
        name: Base Info,
        component: getComponent(customers/baseInfo/index),
        permission: true,
        meta: { key: BaseInfo },
      },
    ],
  },
页面代码:

import { Component, Vue } from vue-property-decorator;

@Component
export default class Components extends Vue {
  render() {
    const { keepList } = this.$store.state.app;
    return (
      <keep-alive max={10} include={keepList}>
        <router-view />
      </keep-alive>
    );
  }
}

方式2类组件. 在开发环境,会直接把类名作为组件的name值,但是build时类名会被忽略掉,因此需要手动加上name属性。

@Component{
    name: componentName
}
export default class Components extends Vue {}

技术分享图片

 

 

这个也可以在调试工具下得到印证

webpack打包vue项目 keep-alive不生效

原文:https://www.cnblogs.com/plBlog/p/12355754.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!