解決Vue Router報錯 Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext

起因： 拉舊項目重跑發現運行報錯，猜測是包更新導致部分寫法不兼容。之后發現是原寫法在webpack4中不兼容。所以這篇文章主要講兩部分：

1. 如何解決webpack4 動態編譯import報錯

2. imoort 和 require到底有什么區別？兩者是否可以無縫替換？

 

一、解決報錯
// 原寫法
export const loadView = (view) => {
return () => import(`@/views/${view}`)
}

// webpack4 中動態import不支持以變量的方式，替換為下面的代碼
export const loadView = (view) => {
return (resolve) => require([`@/views/${view}`], resolve)
}

export function getBackendRoutes(routes) {
  const res = []
  const keys = ['path', 'name', 'children', 'redirect', 'alwaysShow', 'meta', 'hidden']
  routes.forEach(item => {
    // alert('getBackendRoutes.routes item===' + JSON.stringify(item))
    const newItem = {}
    if (item.component) {
      if (item.component === 'layout/Layout') {
        newItem.component = Layout
      } else if (item.component === 'Layout') {
        newItem.component = Layout
      } else {
        const view = 'error-page/404'
        // newItem.component = () => import(`@/views/${view}`)
        // newItem.component = () => import(`@/views/error-page/404`)
        newItem.component = (resolve) => require([`@/views/${view}`], resolve)
      }
    }