vue解決使用webpack打包后keep-alive不生效的方法
問(wèn)題是這樣的，我使用webpack的npm run dev運(yùn)行的時(shí)候，keep-alive路由緩存是有效的，但是我npm run build，把文件放到實(shí)際的項(xiàng)目中去的時(shí)候，會(huì)有如下的問(wèn)題：
路由如下：
var menus = [
{
path: '/user',
name: '用戶(hù)',
component: '/user',
redirect: '/user/index1',
icon: 'fa-bandcamp',
meta: {
keepAlive: false
},
children: [
{ path: 'index1', component: '/user/index1', name: '用戶(hù)管理1', meta: {keepAlive: true}},
{ path: 'index2', component: '/user/index2', name: '用戶(hù)管理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 之間做切換的時(shí)候路由緩存還是生效的，但是在user和system之間切換的時(shí)候就不生效了，解決方法如下，也解釋不清楚什么原因，可能生產(chǎn)環(huán)境下需要在路由的文件上面做緩存把
在route目錄下新建兩個(gè)文件：
_import_development.js
module.exports = file => require('@/views/' + file + '.vue')
_import_production.js
module.exports = file => () => import('@/views/' + file + '.vue')
原先路由import的時(shí)候是這樣的：
import Home from '@/views/home/homeView'
現(xiàn)在改成這樣：
const _import = require('./_import_' + process.env.NODE_ENV);
const Login = _import('index/loginView')
重新打包運(yùn)行生效！
以上這篇vue解決使用webpack打包后keep-alive不生效的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue 使某個(gè)組件不被 keep-alive 緩存的方法
- 解決vue keep-alive 數(shù)據(jù)更新的問(wèn)題
- vue2使用keep-alive緩存多層列表頁(yè)的方法
- 基于vue中keep-alive緩存問(wèn)題的解決方法
- 詳解關(guān)于Vue2.0路由開(kāi)啟keep-alive時(shí)需要注意的地方
- Vue中 key keep-alive的實(shí)現(xiàn)原理
- vue 中的keep-alive實(shí)例代碼
- vue.js內(nèi)置組件之keep-alive組件使用
- vue keep-alive請(qǐng)求數(shù)據(jù)的方法示例
- vue中keep-alive的用法及問(wèn)題描述
- vue中進(jìn)入詳情頁(yè)記住滾動(dòng)位置的方法(keep-alive)
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)觸底查詢(xún)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
Vue生命周期activated之返回上一頁(yè)不重新請(qǐng)求數(shù)據(jù)操作
這篇文章主要介紹了Vue生命周期activated之返回上一頁(yè)不重新請(qǐng)求數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
在Vue3中使用BabylonJs開(kāi)發(fā)?3D的初體驗(yàn)
這篇文章主要介紹了在?Vue3?中使用?BabylonJs?開(kāi)發(fā)?3D?是什么體驗(yàn),在本文中，向您展示了如何創(chuàng)建?Vue?組件、Babylon?類(lèi)、在畫(huà)布上渲染場(chǎng)景以及創(chuàng)建?3D?網(wǎng)格，需要的朋友可以參考下2022-07-07
Vue3實(shí)現(xiàn)Message消息組件示例
在大多數(shù) web 產(chǎn)品中，全局的 Message 組件占有較大的使用場(chǎng)景，本文主要介紹了Vue3實(shí)現(xiàn)Message消息組件示例，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
這篇文章主要介紹了vue3動(dòng)態(tài)組件使用詳解的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue3如何實(shí)現(xiàn)變量雙向綁定問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-11-11
利用vue+elementUI設(shè)置省市縣三級(jí)聯(lián)動(dòng)下拉列表框的詳細(xì)過(guò)程
在做電商項(xiàng)目的時(shí)候需要添加修改收貨地址,如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)選取省市區(qū)地址困擾了我不少時(shí)間,這篇文章主要給大家介紹了關(guān)于利用vue+elementUI設(shè)置省市縣三級(jí)聯(lián)動(dòng)下拉列表框的相關(guān)資料,需要的朋友可以參考下2022-08-08
Vue使用fabric.js實(shí)現(xiàn)局部截圖與大圖預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了Vue如何使用fabric.js實(shí)現(xiàn)局部截圖與el-image-viewer大圖預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的可以了解下2024-02-02
淺談Vue使用Cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯中的坑
這篇文章主要介紹了淺談Vue使用Cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯中的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
詳解通過(guò)JSON數(shù)據(jù)使用VUE.JS
本篇文章主要介紹了詳解通過(guò)JSON數(shù)據(jù)使用VUE.JS，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05