Vue自定義頁面路由

錯誤1：webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), <anonymous>:2:10)

路由信息由后端給出，那么前端需要動態加載路由，同時component的路徑也是后端給出，但是動態加載該路徑會報錯

// 假如path = '@/views/user'
const com = () => import(path) // 這樣會報錯哦
 
const com2 = () = > import('@/views/user') // 這樣寫死的字符串就可以

　　

原因應該是在webpack，webpack 編譯es6 動態引入 import() 時不能傳入變量，因為webpack的現在的實現方式不能實現完全動態。

解決辦法:

可以通過字符串模板來提供部分信息給webpack，例如import(`@/${path}`), 這樣編譯時會編譯所有@/views下的模塊，但運行時確定path的值才會加載，從而實現懶加載。

如果寫了@給webpack還是不能識別，那么可能你需要多些幾級的路徑，如import(`@/views/${path}`)

 

錯誤2：Syntax Error: TypeError: Cannot read property 'range' of null

解決方案

　　1、問題原因為babel-lint版本過高問題導致。

解決方式：降低版本，比如7/8都可以。

 

修改package.json

 

	...
	"devDependencies": {
			...
	    "babel-eslint": "^7.2.3",
	     ...
     }
　

　　　　1、調整頁面路由頁面導入方式

　　

　　　　//【component = () => import(`@/views${item.path}`)】這個地方用這種方式有時報錯，解決方案使用【component = resolve => require([`@/views${item.path}`], resolve)】
      component = resolve => require([`@/views${item.path}`], resolve)