Vue3错误集合
# 前言
开发Vue3
中遇到的奇葩问题,本文持续更新
# vue
警告:Template compilation error: Tags with side effect (< script > and < style >) are ignored in
我目前遇到的仅仅是情况一
# 情况一:app
挂载到了body
上
app
的挂载尽量在body
下的第一个div
上,一定不要挂载在body
上。
# 情况二:script
标签或者style
标签在body
中间加载
一般情况下,script
的引入在head
标签或者body
标签的最后面。但是有些特殊情况,需要在页面的中间引入script
,这个时候就会报出警告。
可以用v-is="'script'"
代替script,style
同理,如下
<!-- vue版本 < 3.1.0 -->
<div v-is="'script'">console.log("P")</div>
<div v-is="'style'">.test{background-color:red}</div>
<!-- vue版本 >= 3.1.0 -->
<component is="script"> console.log("P") </component>
<component is="style"> .test{background-color:red} </component>
2
3
4
5
6
7
# Invalid prop: type check failed for prop “xxx“
报错处理
无效的命名数据:"数据"类型检查失败。而且上面说了是Boolean
类型错误,要把值改成true
,并且看到是tag
标签的错误。
<!-- 错误代码 -->
<el-menu
default-active="1"
active-text-color="#409EFF"
collapse-transition="true"
mode="vertical"
></el-menu>
2
3
4
5
6
7
然后看到collapse-transition
使用的值虽然是true
,但是执行时是按照String
类型执行,而不是Boolean
去执行的
解决方案呢...加冒号处理:collapse-transition="true"
改成:collapse-transition="true"
即可
# Uncaught SyntaxError: The requested module does not provide an export named
使用export default
时,对应的import
语句不需要使用大括号;
不使用export default
时,对应的import
语句需要使用大括号。
<!-- 错误代码 -->
<script setup>
import { Menu } from "./components/basic/Menu.vue";
</script>
2
3
4
解决方案呢...将Menu
的大括号去掉:import { Menu } from "./components/basic/Menu.vue";
改成import Menu from "./components/basic/Menu.vue";
即可
# injection "Symbol(router)" not found
出现这个错误基本上是Symbol
后面括号里面的没有进行引用...我这个情况是使用了路由但没有在main.js
中引用router
import { createApp } from "vue";
// 引入路由
import router from "./router";
import naive from "naive-ui";
// 通用字体
import "vfonts/Lato.css";
// 等宽字体
import "vfonts/FiraCode.css";
import App from "./App.vue";
const app = createApp(App);
// 使用路由
app.use(router);
app.use(naive);
app.mount("#app");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# ERR_PNPM_INVALID_OVERRIDE_SELECTOR Cannot parse the "//" selector in the overrides
在项目的package.json
文件中找到resolutions
,删除"//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
# Failed to resolve component:xxx
这个情况基本上是组件没有引用,使用组件的页面引入组件即可
假定当前的是index.vue
中引用了pie.vue
这个文件
...
<!-- 错误写法 -->
<Pie />
...
2
3
4
...
import Pie from "xxxx/pie.vue"
....
<Pie />
...
2
3
4
5
# vue3 + vite
路由不生效
如果配置文件都没错的话,看看 App.vue
是否引入了 <router-view .../>
# 提示 Component inside <Transition> renders non-element root node that cannot be animated.
原因:<Transition>
组件只能对元素根节点进行动画操作,但在使用的组件似乎在 <Transition>
组件中渲染了非元素根节点
解决方案: 放到 vue
页面中的 <div>
标签中即可
eg:
<!-- 错误写法 -->
<template>
<div>
<div v-if="show">
<div>我是内容</div>
</div>
</div>
<el-drawer
v-model="showDrawer"
title="I am the title"
direction="ltr"
:before-close="handleDrawerClose">
</el-drawer>
</template>
<!-- 正确写法 -->
<template>
<div>
<div v-if="show">
<div>我是内容</div>
</div>
<el-drawer
v-model="showDrawer"
title="I am the title"
direction="ltr"
:before-close="handleDrawerClose">
</el-drawer>
</div>
</template>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29