vue解決使用webpack打包后keep-alive不生效的方法

更新時間：2018年09月01日 12:31:17 作者：_小小黑

今天小編就為大家分享一篇vue解決使用webpack打包后keep-alive不生效的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

問題是這樣的，我使用webpack的npm run dev運行的時候，keep-alive路由緩存是有效的，但是我npm run build，把文件放到實際的項目中去的時候，會有如下的問題：

路由如下：

var menus = [
 {
  path: '/user',
  name: '用戶',
  component: '/user',
  redirect: '/user/index1',
  icon: 'fa-bandcamp',
  meta: {
   keepAlive: false
  },
  children: [
   { path: 'index1', component: '/user/index1', name: '用戶管理1', meta: {keepAlive: true}},
   { path: 'index2', component: '/user/index2', name: '用戶管理2', meta: {keepAlive: true}},
  ]
 },{
  path: '/system',
  name: 'system',
  component: '/system',
  redirect: '/system/index',
  icon: 'fa-superpowers',
  noDropdown: true,
  meta: {
   keepAlive: false
  },
  children: [
   { path: 'index', component: '/system/index', name: '系統(tǒng)管理', meta: {keepAlive: true}},
  ]
 },
]

我在 /user/index1 和/user/index2 之間做切換的時候路由緩存還是生效的，但是在user和system之間切換的時候就不生效了，解決方法如下，也解釋不清楚什么原因，可能生產(chǎn)環(huán)境下需要在路由的文件上面做緩存把

在route目錄下新建兩個文件：

_import_development.js

module.exports = file => require('@/views/' + file + '.vue')

_import_production.js

module.exports = file => () => import('@/views/' + file + '.vue')

原先路由import的時候是這樣的：

import Home from '@/views/home/homeView'

現(xiàn)在改成這樣：

const _import = require('./_import_' + process.env.NODE_ENV);
const Login = _import('index/loginView')

重新打包運行生效！

以上這篇vue解決使用webpack打包后keep-alive不生效的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue實現(xiàn)觸底查詢功能
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)觸底查詢功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
Vue生命周期activated之返回上一頁不重新請求數(shù)據(jù)操作
這篇文章主要介紹了Vue生命周期activated之返回上一頁不重新請求數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
在Vue3中使用BabylonJs開發(fā)?3D的初體驗
這篇文章主要介紹了在?Vue3?中使用?BabylonJs?開發(fā)?3D?是什么體驗,在本文中，向您展示了如何創(chuàng)建?Vue?組件、Babylon?類、在畫布上渲染場景以及創(chuàng)建?3D?網(wǎng)格，需要的朋友可以參考下
2022-07-07
Vue3實現(xiàn)Message消息組件示例
在大多數(shù) web 產(chǎn)品中，全局的 Message 組件占有較大的使用場景，本文主要介紹了Vue3實現(xiàn)Message消息組件示例，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-06-06
vue3動態(tài)組件使用詳解
這篇文章主要介紹了vue3動態(tài)組件使用詳解的相關(guān)資料,需要的朋友可以參考下
2023-02-02
vue3如何實現(xiàn)變量雙向綁定
這篇文章主要介紹了vue3如何實現(xiàn)變量雙向綁定問題,具有很好的參考價值,希望對大家有所幫助,
2023-11-11
利用vue+elementUI設(shè)置省市縣三級聯(lián)動下拉列表框的詳細(xì)過程
在做電商項目的時候需要添加修改收貨地址,如何實現(xiàn)三級聯(lián)動選取省市區(qū)地址困擾了我不少時間,這篇文章主要給大家介紹了關(guān)于利用vue+elementUI設(shè)置省市縣三級聯(lián)動下拉列表框的相關(guān)資料,需要的朋友可以參考下
2022-08-08
Vue使用fabric.js實現(xiàn)局部截圖與大圖預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了Vue如何使用fabric.js實現(xiàn)局部截圖與el-image-viewer大圖預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的可以了解下
2024-02-02
淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑
這篇文章主要介紹了淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
詳解通過JSON數(shù)據(jù)使用VUE.JS
本篇文章主要介紹了詳解通過JSON數(shù)據(jù)使用VUE.JS，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05