iview / iview/iview-admin

请教一下, 为什么我从远程获取的路由, `import` 动态 `component` 报错?

Open
#1,365 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
Vue
Stars
16.4k
Forks
4.7k
PR merge metrics
No merged PRs in 30d

Description

小弟想从远程拿到了菜单数组, `component` 动态引入报错

```js
const formatMenu = menus=> {
let result = []
menus.forEach(item=>{
let b = { ... }
let nowPath = item.component
let path = `@/view/${ nowPath }.vue`
b.component = ()=> import(path)
})
}
```

本地已经在 `.babelrc` 添加 `@babel/plugin-syntax-dynamic-import`

```conf
{
"plugins": ["@babel/plugin-syntax-dynamic-import"],
"presets": [
"@vue/app"
]
}

```

`package.json` 文件

```json
{
"name": "iview-admin",
"version": "2.0.0",
"author": "Lison",
"private": false,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e"
},
"dependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@riophae/vue-treeselect": "^0.4.0",
"adonis-vue-websocket": "^2.0.2",
"axios": "^0.18.0",
"clipboard": "^2.0.0",
"codemirror": "^5.38.0",
"countup": "^1.8.2",
"cropperjs": "^1.2.2",
"dayjs": "^1.7.7",
"echarts": "^4.0.4",
"html2canvas": "^1.0.0-alpha.12",
"iview": "^3.2.2",
"iview-area": "^1.5.17",
"js-cookie": "^2.2.0",
"moment": "^2.24.0",
"pinyin": "^2.9.0",
"simplemde": "^1.11.2",
"sortablejs": "^1.7.0",
"tree-table-vue": "^1.1.0",
"v-calendar": "^1.0.0-beta.22",
"v-org-tree": "^1.0.6",
"v-viewer": "^1.4.2",
"vue": "^2.5.10",
"vue-avatar": "^2.1.7",
"vue-i18n": "^7.8.0",
"vue-loading-spinner": "^1.0.11",
"vue-router": "^3.1.3",
"vue-websocket": "^0.2.3",
"vuedraggable": "^2.16.0",
"vuex": "^3.0.1",
"wangeditor": "^3.1.1",
"xlsx": "^0.13.3"
},
"devDependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@vue/cli-plugin-babel": "^3.0.1",
"@vue/cli-plugin-eslint": "^3.0.1",
"@vue/cli-plugin-unit-mocha": "^3.0.1",
"@vue/cli-service": "^3.0.1",
"@vue/eslint-config-standard": "^3.0.0-beta.10",
"@vue/test-utils": "^1.0.0-beta.10",
"babel-eslint": "^8.0.1",
"chai": "^4.1.2",
"eslint-plugin-cypress": "^2.0.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"lint-staged": "^6.0.0",
"mockjs": "^1.0.1-beta3",
"vue-template-compiler": "^2.5.13"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
]
}
}

```

求教各位大能是啥子原因....尝试过删除 `node_modules` 文件夹, 在 `npm install` | `cnpm install` | `yarn` 都不行.

需求是从远程拿到路由

```js
// api/user.js
export const getRemoteUserMenu = (role_id)=>{
return axios.Request({
url: 'get_menu',
method: 'get',
params: {
role_id
}
})
}

// router/index.js
router.beforeEach((,,next)=> {
if (true){
getRemoteUserMenu(xx).then(res=>{
localSave('router', res.data)
store.commit('updateMenuList', res.data)
})
}
})
```

比较奇怪的, 有时候动态 `import` 又不会报错.

感谢解答, 感谢各位!

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with api/user.js, router/index.js, and the formatMenu function shown in the issue; reproduce the remote-menu navigation flow with the project's Vue CLI dev and build commands. Check the dynamic import behavior and capture the intermittent error details. Done means the failure has a reliable reproduction and its cause is documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, javascript, webpack
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.