目前在vue-router動態添加路由，大概就是在一個管理平臺上配置選單路徑和按鈕權限，然后根據獲取的選單和路由通過 router.addRoutes（）方法添加路由，在拼接路由的時候采用了動態import這個方法，如下圖
1.png912×407 28 KB
，本人想要很多檔案打成一個.js檔案，但是這里會根據后面componentName這個變數打成不同的.js請問哪位大神知道怎么弄嗎
uj5u.com熱心網友回復：
但是這里會根據后面componentName這個變數打成不同的.js請問哪位大
使用了 import 函式，在沒有定義 componentName 就會一個模塊打包成一個檔案
使用了就會把同名的打包到一起
你要是想使用懶加載同時多個模塊打包到一起
你只要把頂級路由使用import函式引入 子級模塊還是正常的引入方式
或者同一個大模塊下的組件指定成同一個 componentName
uj5u.com熱心網友回復：
而且這里的 /* webpackChunkName: ‘打包后的名字’ */ 只接受[index] 和[request]這兩個占位符uj5u.com熱心網友回復：
也就是你要實作的功能：1、專案按照頂級模塊拆分打包
2、用戶根據權限去自動生成路由
3、不存在的路由就不會加載對應的模塊
那么你要實作的是：
1、固定寫好路由檔案，根據頂級模塊拆分打包
2、根據用戶權限去過濾篩選得出具體的路由
你仔細想一下是不是實作了上述說的功能
uj5u.com熱心網友回復：
還有一點是，你可能覺得為什么必須去動態配置路由，為什么不固定配置好，因為我們是根據選單來控制權限的，這樣打包的話，可以讓用戶在知道你頁面地址，但是沒有給他這個選單的權限的時候，因為沒有打包這個檔案進去，所以用戶會跳進無權限頁面的，還一種方法就是固定的寫好路由配置，所有檔案都打包，然后通過路由守衛來控制權限選單跳轉無權限頁面uj5u.com熱心網友回復：
1、就是寫固定值，因為你是知道這個路由屬于那個大模塊2、如果你的chunk 塊，后邊不想加一些后綴，那你就在vue.config.js 里邊配置就可以了
uj5u.com熱心網友回復：
emmm，你可能理解成這里是直接配置好路由，直接進寫入router那個屬性的，我這里是根據配置的選單，通過介面請求資料然后決議出來的路由和檔案路徑，動態加入路由的，你根本不知道屬于哪個大模塊，靜態的很簡單，是可以分模塊打包的，比如我之前這么寫的，如下圖
2.png965×241 68 KB
uj5u.com熱心網友回復：
你說的是去改webpcak的原始碼嗎uj5u.com熱心網友回復：
你這個是行不通的，因為這里的具體的模塊名我就是需要根據大模塊模塊來生成的所以只能是變數，再者如果寫固定的值的話，webpack動態的時候會給他加上index尾部uj5u.com熱心網友回復：
只能配置選單，也就是只能配置選單名和路由路徑，這是需求~，然后根據你配置的去渲染系統選單和決議出上面打包的檔案路徑，所以目前那個打包的名只能是變數，寫靜態的因為你不知道名字。uj5u.com熱心網友回復：
問題的關鍵點就在componentName 這個不可能同名的，因為這里后面是一個檔案路徑拼接出來的，這里是一個路由會打成一個包，我想多個路由打成一個包，比如某個大分類下面有很多小路由頁面，我就想打成這個大分類的。uj5u.com熱心網友回復：
個選單的權限的時候，因為沒有打包這個檔案進去，所以用戶會跳進無權限頁面的，還一種方法就是固定的寫好路由配置，所有檔案都打包，然后通過路由守衛來控制權限選單跳轉無權
也就是你要事項的功能是根據用戶的權限 動態打包對應的權限模塊？
uj5u.com熱心網友回復：
沒太懂你的意思，uj5u.com熱心網友回復：
是的，因為不想用所有都打包好后路由守衛去全域攔截，嘗試用動態加載的。現在動態的不是不能用，只是我有強迫癥，想減少服務器壓力，畢竟一個模塊打成一個檔案，用戶每進一個新頁面就要請求一次這個頁面的js檔案，性能不太高（雖然很微乎其微）uj5u.com熱心網友回復：
你可能理解有點偏差：1.我要實作的是根據用戶權限動態生成路由檔案。2.固定寫好路由檔案那種方法已經被廢棄了。 功能已經實作，現在問題是我有強迫癥，想減少服務器壓力，畢竟一個模塊打成一個檔案，用戶每進一個新頁面就要請求一次這個頁面的js檔案。uj5u.com熱心網友回復：
你這樣寫的話 就只能是，你的data資料中的每一項寫個回呼函式，這個函式是用來進行 import 的componentName 是可以同名的
uj5u.com熱心網友回復：
區別是 我這個 方法是在 data 資料中的每一項。我可以在具體路由上 設定 webpackChunkName 的名字你的是個公共方法 我發設定 webpackChunkName 具體的名字
uj5u.com熱心網友回復：
而且你這個和我上面的那個本質是一樣的，沒有任何區別uj5u.com熱心網友回復：
return getPath(data).map({path, menuName, id, cb}) => ({
path,
component: cb
}
)
cb = () =>{
return () => import(/* webpackChunkName: "具體的模塊名" */ 'path')
}
這個模塊名可以重復
uj5u.com熱心網友回復：
分包的寫法，不讓他分包去改webapck，準行
uj5u.com熱心網友回復：
我這里是根據配置的選單
也就是你的選單資料是通過后端獲取的對吧？
那么你應該這么弄
首先將所有的模塊路由都配置好，
等后端介面回傳之后，將不包含的路由資訊剔除掉
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/226687.html
標籤：其他技術討論專區