先描述我的代码目录结构:
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的局部组件注册 配合导致的。
隐隐约约觉得原因可能 和组件间的循环引用类似,但不知道具体原理和如何解决。
有哪位大神么能够帮忙解答下吗?