最近在跟着写一个后台管理系统的项目,在写到菜单栏的引用的时候,因为要做一个模板并在Home中引用,所以就要用import引入,原本一切正常,但是敲完代码后发现打包好的项目页面上根本没有菜单栏的展示效果(是直接没有,整个左侧菜单栏都消失了),稍作改动后的源码与图示如下。
<script> import * as CommonAside from "@/components/CommonAside.vue"; export default { name: "Home.vue", components: { CommonAside }, data(){ return {} } } </script>
再去查发现很多人给的建议是vue中的compile 的问题,在此奉上找到的一张描述此问题的大神贴。
从一个奇怪的错误出发理解 Vue 基本概念 - 知乎 (zhihu.com)
但是通体看完之后发现问题貌似还是不对,最后我尝试性地把import * as xxx from xxx改回了import xxx from xxx(原本我跟着网上的帖子改了好几步,这是其中的一步),然后就正常了。
<script> import CommonAside from "@/components/CommonAside.vue"; export default { name: "Home.vue", components: { CommonAside }, data(){ return {} } } </script>
个人觉得是因为不能全局引用?(* as 是指全局引用)因为项目是按需引用的逻辑写的。