vue中，組件怎麼做到按需載入呢？

這樣子寫會報錯呢？？

---

題主，你要做的這件事其實叫做code splitting ，可以將代碼分割成不同的代碼塊來按需載入，你現在的寫法其實是 AMD 規範的。

我們從你的 console 的 error 出發來看為什麼報錯。首先，找不到模塊，這時候你一定很奇怪，明明是有的，為什麼找不到呢？因為，require 的參數其實是文件的路徑，以下是 node 對於 require的實現的一部分：

var filename = Module._resolveFilename(request, parent);


而你已經通過 import 將模塊載入了，你的 One 其實已經是載入後的模塊對象了，因此才會報這個錯誤。解決方案可以參考其他答主的，簡單的說就是把你寫 One 的地方改成對應的路徑。

---

如果你是想要動態載入的話可以參考官方文檔 懶載入 · GitBook 應該能解決你的問題。

但是還有一種情況，如果說某一個模塊是別人開發的，在別的倉庫中，最後是給你一個js地址的話，就會更複雜一點，但是可以是類似這樣來做：

/** entry.js **/
const config = {
a: "http://xx/a.js"
}
const modules = {}
window.registerVueComponent = function (key, component) {
modules[key] = component
}

const routes = [
{
path: "/a",
component: function (resolve) {
if (modules["a"]) {
resolve(modules["a"])
} else {
// 自己實現載入js
loadScript(config["a"]).then(function () {
resolve(modules["a"])
})
}
}
}
]
// 初始化路由部分省略

/** http://xx/a.js **/
const MyComponent = {template: "&a&"}
window.registerVueComponent("a", MyComponent)


簡要來說就是有一個對應配置來標示對應的模塊對應關係，當匹配到對應的路由的時候去載入js，但是還要解決去在另一個js中註冊這部分，所以這裡就通過一個 全局函數來做了。

---

這樣用：

require(["./components/One.vue"], resolve)


不要這樣：

import One from "./components/One.vue"
require([One], resolve)


---

加一句比較重要點的，經本人測試，每個頁面都要加上name，不然其他頁面也會緩存

---

component: resolve =&> void(require(["../view/detail.vue"], resolve))

---

推薦閱讀：