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

Question

项目会使用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';@Componentexport default class Components extends Vue {
  render() {
    const { keepList } = this.$store.state.app;    return (
      <keep-alive max={10} include={keepList}>
        <router-view />
      </keep-alive>
    );
  }
}

Answer 1

你好，请问是需要新建两个环境的js文件吗？ 为什么我这样写过之后报exports的错误……

Answer 2

既然打包有出错信息，那么你可以根据出错信息去定位错误，然后找到解决办法。