Fix(keep-alive): fix keep-alive error in production mode

Author: Armour

mock/role/routes.ts

@@ -249,7 +249,7 @@ export const asyncRoutes = [
       {
         path: 'bar-chart',
         component: 'views/charts/bar-chart',
-        name: 'BarChart',
+        name: 'BarChartDemo',
         meta: {
           title: 'barChart',
           noCache: true
@@ -258,7 +258,7 @@ export const asyncRoutes = [
       {
         path: 'line-chart',
         component: 'views/charts/line-chart',
-        name: 'LineChart',
+        name: 'LineChartDemo',
         meta: {
           title: 'lineChart',
           noCache: true
@@ -267,7 +267,7 @@ export const asyncRoutes = [
       {
         path: 'mixedchart',
         component: 'views/charts/mixed-chart',
-        name: 'MixedChart',
+        name: 'MixedChartDemo',
         meta: {
           title: 'mixedChart',
           noCache: true

src/App.vue

@@ -7,6 +7,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class App extends Vue {}
+@Component({
+  name: 'App'
+})
+export default class extends Vue {}
 </script>

src/components/BackToTop/index.vue

@@ -17,8 +17,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class BackToTop extends Vue {
+@Component({
+  name: 'BackToTop'
+})
+export default class extends Vue {
   @Prop({ default: 400 }) private visibilityHeight!: number
   @Prop({ default: 'fade' }) private transitionName!: string
   @Prop({ default: 0 }) private backPosition!: number

src/components/Breadcrumb/index.vue

@@ -26,8 +26,10 @@ import pathToRegexp from 'path-to-regexp'
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import { RouteRecord, Route } from 'vue-router'
 
-@Component
-export default class Breadcrumb extends Vue {
+@Component({
+  name: 'Breadcrumb'
+})
+export default class extends Vue {
   private breadcrumbs: RouteRecord[] = []
 
   @Watch('$route')

src/components/Charts/BarChart.vue

@@ -12,8 +12,10 @@ import { Component, Prop } from 'vue-property-decorator'
 import { mixins } from 'vue-class-component'
 import ResizeMixin from './mixins/resize'
 
-@Component
-export default class BarChart extends mixins(ResizeMixin) {
+@Component({
+  name: 'BarChart'
+})
+export default class extends mixins(ResizeMixin) {
   @Prop({ default: 'chart' }) private className!: string
   @Prop({ default: 'chart' }) private id!: string
   @Prop({ default: '200px' }) private width!: string

src/components/Charts/LineChart.vue

@@ -12,8 +12,10 @@ import { Component, Prop } from 'vue-property-decorator'
 import { mixins } from 'vue-class-component'
 import ResizeMixin from './mixins/resize'
 
-@Component
-export default class LineChart extends mixins(ResizeMixin) {
+@Component({
+  name: 'LineChart'
+})
+export default class extends mixins(ResizeMixin) {
   @Prop({ default: 'chart' }) private className!: string
   @Prop({ default: 'chart' }) private id!: string
   @Prop({ default: '200px' }) private width!: string

src/components/Charts/MixedChart.vue

@@ -12,8 +12,10 @@ import { Component, Prop } from 'vue-property-decorator'
 import { mixins } from 'vue-class-component'
 import ResizeMixin from './mixins/resize'
 
-@Component
-export default class MixedChart extends mixins(ResizeMixin) {
+@Component({
+  name: 'MixedChart'
+})
+export default class extends mixins(ResizeMixin) {
   @Prop({ default: 'chart' }) private className!: string
   @Prop({ default: 'chart' }) private id!: string
   @Prop({ default: '200px' }) private width!: string

src/components/Charts/mixins/resize.ts

@@ -1,8 +1,10 @@
 import { ECharts } from 'echarts'
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class ResizeMixin extends Vue {
+@Component({
+  name: 'ResizeMixin'
+})
+export default class extends Vue {
   protected chart!: ECharts | null
   private sidebarElm?: Element
 

src/components/DraggableKanban/index.vue

@@ -24,11 +24,12 @@ import Draggable from 'vuedraggable'
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
 @Component({
+  name: 'DraggableKanban',
   components: {
     Draggable
   }
 })
-export default class DraggableKanban extends Vue {
+export default class extends Vue {
   @Prop({ default: 'header' }) private headerText!: string
   @Prop({ default: () => [] }) private list!: object[]
   @Prop({ default: () => {} }) private options!: object

src/components/DraggableList/index.vue

@@ -65,11 +65,12 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 import { IArticleData } from '@/api/types'
 
 @Component({
+  name: 'DraggableList',
   components: {
     Draggable
   }
 })
-export default class DraggableList extends Vue {
+export default class extends Vue {
   @Prop({ default: () => [] }) private list1!: IArticleData[]
   @Prop({ default: () => [] }) private list2!: IArticleData[]
   @Prop({ default: 'list1' }) private list1Title!: string

src/components/DraggableSelect/index.vue

@@ -16,8 +16,10 @@ import Sortable from 'sortablejs'
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Select } from 'element-ui'
 
-@Component
-export default class DraggableSelect extends Vue {
+@Component({
+  name: 'DraggableSelect'
+})
+export default class extends Vue {
   @Prop({ required: true }) private value!: string[]
 
   private sortable: Sortable | null = null

src/components/DropdownMenu/index.vue

@@ -27,8 +27,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class DropdownMenu extends Vue {
+@Component({
+  name: 'DropdownMenu'
+})
+export default class extends Vue {
   @Prop({ default: () => [] }) private items!: object[]
   @Prop({ default: 'vue' }) private title!: string
 

src/components/Dropzone/index.vue

@@ -27,11 +27,12 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
 import { SettingsModule } from '@/store/modules/settings'
 
 @Component({
+  name: 'Dropzone',
   components: {
     VueDropzone
   }
 })
-export default class Dropzone extends Vue {
+export default class extends Vue {
   // You can add more Prop, see: https://www.dropzonejs.com/#configuration
   @Prop({ required: true }) private id!: string
   @Prop({ required: true }) private url!: string

src/components/ErrorLog/index.vue

@@ -78,8 +78,10 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { ErrorLogModule } from '@/store/modules/error-log'
 
-@Component
-export default class ErrorLog extends Vue {
+@Component({
+  name: 'ErrorLog'
+})
+export default class extends Vue {
   private dialogTableVisible = false
 
   get errorLogs() {

src/components/GithubCorner/index.vue

@@ -31,8 +31,10 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-@Component
-export default class GithubCorner extends Vue {}
+@Component({
+  name: 'GithubCorner'
+})
+export default class extends Vue {}
 </script>
 
 <style lang="scss" scoped>

src/components/Hamburger/index.vue

@@ -14,8 +14,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class Hamburger extends Vue {
+@Component({
+  name: 'Hamburger'
+})
+export default class extends Vue {
   @Prop({ default: false }) private isActive!: boolean
 
   private toggleClick() {

src/components/HeaderSearch/index.vue

@@ -39,8 +39,10 @@ import { AppModule } from '@/store/modules/app'
 import { PermissionModule } from '@/store/modules/permission'
 import i18n from '@/lang' // Internationalization
 
-@Component
-export default class HeaderSearch extends Vue {
+@Component({
+  name: 'HeaderSearch'
+})
+export default class extends Vue {
   private search = ''
   private show = false
   private options: RouteConfig[] = []

src/components/JsonEditor/index.vue

@@ -18,8 +18,10 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
 /* eslint-disable import/no-webpack-loader-syntax */
 require('script-loader!jsonlint')
 
-@Component
-export default class JsonEditor extends Vue {
+@Component({
+  name: 'JsonEditor'
+})
+export default class extends Vue {
   @Prop({ required: true }) private value!: string
 
   private jsonEditor?: Editor

src/components/LangSelect/index.vue

@@ -43,8 +43,10 @@
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import { AppModule } from '@/store/modules/app'
 
-@Component
-export default class Login extends Vue {
+@Component({
+  name: 'Login'
+})
+export default class extends Vue {
   get language() {
     return AppModule.language
   }

src/components/MarkdownEditor/index.vue

@@ -12,8 +12,10 @@ import TuiEditor from 'tui-editor'
 
 const defaultId = () => 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
 
-@Component
-export default class MarkdownEditor extends Vue {
+@Component({
+  name: 'MarkdownEditor'
+})
+export default class extends Vue {
   @Prop({ required: true }) private value!: string
   @Prop({ default: defaultId }) private id!: string
   @Prop({ default: () => defaultOptions }) private options!: tuiEditor.IEditorOptions

src/components/MaterialInput/index.vue

@@ -120,8 +120,10 @@
 // Source: https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
 
-@Component
-export default class MaterialInput extends Vue {
+@Component({
+  name: 'MaterialInput'
+})
+export default class extends Vue {
   @Prop({ default: '' }) private icon!: string
   @Prop({ default: '' }) private name!: string
   @Prop({ default: 'text' }) private type!: string

src/components/Pagination/index.vue

@@ -21,8 +21,10 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { scrollTo } from '@/utils/scroll-to'
 
-@Component
-export default class Pagination extends Vue {
+@Component({
+  name: 'Pagination'
+})
+export default class extends Vue {
   @Prop({ required: true }) private total!: number
   @Prop({ default: 1 }) private page!: number
   @Prop({ default: 20 }) private limit!: number

src/components/PanThumb/index.vue

@@ -18,8 +18,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class PanThumb extends Vue {
+@Component({
+  name: 'PanThumb'
+})
+export default class extends Vue {
   @Prop({ required: true }) private image!: string
   @Prop({ default: '150px' }) private width!: string
   @Prop({ default: '150px' }) private height!: string

src/components/RightPanel/index.vue

@@ -25,8 +25,10 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
 import { addClass, removeClass } from '@/utils'
 import { SettingsModule } from '@/store/modules/settings'
 
-@Component
-export default class RightPanel extends Vue {
+@Component({
+  name: 'RightPanel'
+})
+export default class extends Vue {
   @Prop({ default: false }) private clickNotClose!: boolean
   @Prop({ default: 250 }) private buttonTop!: number
 

src/components/Screenfull/index.vue

@@ -13,8 +13,10 @@ import { Component, Vue } from 'vue-property-decorator'
 
 const sf = screenfull
 
-@Component
-export default class Screenfull extends Vue {
+@Component({
+  name: 'Screenfull'
+})
+export default class extends Vue {
   private isFullscreen = false
 
   mounted() {

src/components/SizeSelect/index.vue

@@ -29,8 +29,10 @@ import { Component, Vue } from 'vue-property-decorator'
 import { AppModule } from '@/store/modules/app'
 import { TagsViewModule } from '@/store/modules/tags-view'
 
-@Component
-export default class SizeSelect extends Vue {
+@Component({
+  name: 'SizeSelect'
+})
+export default class extends Vue {
   private sizeOptions = [
     { label: 'Default', value: 'default' },
     { label: 'Medium', value: 'medium' },

src/components/Sticky/index.vue

@@ -14,8 +14,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class Sticky extends Vue {
+@Component({
+  name: 'Sticky'
+})
+export default class extends Vue {
   @Prop({ default: 0 }) private stickyTop!: number
   @Prop({ default: 1 }) private zIndex!: number
   @Prop({ default: '' }) private className!: string

src/components/TextHoverEffect/Mallki.vue

@@ -13,8 +13,10 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
-@Component
-export default class GithubCorner extends Vue {
+@Component({
+  name: 'Mallki'
+})
+export default class extends Vue {
   @Prop({ default: '' }) private className!: string
   @Prop({ default: 'vue-typescript-admin' }) private text!: string
 }

src/components/ThemePicker/index.vue

@@ -14,8 +14,10 @@ import { SettingsModule } from '@/store/modules/settings'
 const version = require('element-ui/package.json').version // element-ui version from node_modules
 const ORIGINAL_THEME = '#409EFF' // default color
 
-@Component
-export default class ThemePicker extends Vue {
+@Component({
+  name: 'ThemePicker'
+})
+export default class extends Vue {
   private chalk = '' // The content of theme-chalk css
   private theme = ''