Webpack+Vue,局部组件注册后,仍旧报未注册。
发布于 7 年前 作者 yuanjinyong 3138 次浏览 最后一次编辑是 7 年前 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

先描述我的代码目录结构:

1、frontend\src\views\admin\platform\sys\url\index.js

export {default as UrlView} from ‘./view’ export {default as UrlForm} from ‘./form’

2、frontend\src\views\admin\platform\sys\index.js

export * from ‘./url’ import {UrlView} from ‘./url’ export default [ …… { path: ‘url’, component: UrlView }, …… ]

3、frontend\src\views\admin\platform\index.js

export * from ‘./sys’ import sys from ‘./sys’ export default [ { path: ‘’, component: { template: ‘<router-view></router-view>’ }, children: [ { path: ‘sys’, component: { template: ‘<router-view></router-view>’ }, children: sys }, …… ] } ]

以上为我代码写的逐层往外导出目录下的所有组件(页面和表单)的方式。

一下为导出的组件在同目录下或者不同目录下的引入使用方式:

1、frontend\src\views\admin\platform\sys\url\view.vue

<script type="text/ecmascript-6"> …… import UrlForm from './form' ====》这种使用相对路径引入的方式没有出问题 // import {UrlForm} from 'views' ====》这种使用引入顶层目录下的某个具体组件,出现我下面描述的问题 export default { name: 'urlView', components: { UrlForm }, props: { mode: {type: String, default: ''} }, …… -------------------------------------------------------------------------- 2、frontend\src\views\admin\platform\sys\menu\form.vue -------------------------------------------------------------------------- ====》这里列出这个文件只是为了描述下当组件不同目录时,我想改成引入顶层目录下的某个具体组件,不直接写死文件绝对或者相对路径。 <script type="text/ecmascript-6"> …… // import UrlView from 'views/admin/platform/sys/url/view' import {UrlView} from 'views' // 想使用这种引入方式,规避掉需要写死绝对路径或者相对路径,从而提高代码的可维护性 export default { name: 'menuForm', components: { UrlView }, props: { …… -------------------------------------------------------------------------- -------------------------------------------------------------------------- *问题现象描述:* -------------------------------------------------------------------------- 1、使用相对路径或者绝对路径引入没有出问题。 2、改为使用 import {UrlView} from 'views' 类似的这种引入顶层目录下的某个具体组件,在页面父组件menu\form.vue加载解析子组件UrlView时,会报如下错误 vue.common.js?e881:436 [Vue warn]: Unknown custom element: <url-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <MenuForm> at W:\jeeweb.git\trunk\subprojects\frontend\src\views\admin\platform\sys\menu\form.vue 3、不修改任何引入的配置和方式,而是只修改下menu\form.vue文件的其他地方(比如多加个空行),让该文件有更新,从而导致Webpack的自动编译热替换,浏览器重新热加载组件。在次打开MenuForm表单时,就没有报UrlView未注册了。 4、不修改任何东西,手动在浏览器中把整个页面刷新,重新加载下,让整个Vue的SPA重新启动,又会出现2步中的现象,进行3步后的操作后不会报了,进行4步后又会报。 -------------------------------------------------------------------------- *问题原因猜测:* -------------------------------------------------------------------------- Webpack对import的解析、热替换 和 Vue的局部组件注册 配合导致的。 隐隐约约觉得原因可能 和组件间的循环引用类似,但不知道具体原理和如何解决。 有哪位大神么能够帮忙解答下吗?
回到顶部