最近用Vite+Vue3做了一个小项目。本文记录项目中遇到的一些问题、报错和一些使用方法。1.控制台警告：[Vuewarn]:Extraneousnon-emitseventlisteners(sendMsg)werepassedtocomponentbutcouldn'tbeautomaticallyinheritedbecausecomponentrendersfragmentortextrootnodes.如果侦听器仅用作组件自定义事件侦听器，请使用“emits”选项声明它。警告原因：使用组件传递事件时，Vue3.x在子组件中接收不到。emits中需要定义自定义事件，类似于接收propsapp.component('custom-form',{emits:['inFocus','submit']})2.如何使用sassnpminstallsass--save-devinvite在vite.config.js中引入全局变量exportdefaultdefineConfig({plugins:[vue()],css:{preprocessorOptions:{scss:{additionalData:`@import'src/styles/variables.scss';`}}}})3.stylescoped使用scoped后，父组件的样式不会渗透到组件中的child。但是，子组件的根节点将同时受到其父组件的作用域CSS和子组件的作用域CSS的影响。这样设计是为了让父组件从layout的角度去调整其子组件的根元素的样式::deep(.child){color:red;}4.Vue3.x中的app.config.globalProperties是不建议。该属性可以作为Vue2.x项目的升级，但不建议在新项目中使用。应该使用provide/inject，而不是5.vue-devtools6.0.0-beta.7版本不显示vuex选项解决方法：在store中添加createLogger()，然后在控制台输出日志https://github.com/vuejs/vue-...import{createStore,createLogger}from'vuex'conststore=createStore({modules:{basic},plugins:import.meta.env.DEV?[createLogger()]:[]})6.store中的数据不响应解决方案：必须使用computed，否则不会响应setup(){return{show:computed(()=>store.state.basic.show)}}7.听对于Vue3.x中的路由变化import{onBeforeRouteUpdate}from'vue-router'exportdefault{setup(){onBeforeRouteUpdate((to)=>{console.log(to)})}}8.开发环境正常但是打包后报错UncaughtTypeError:Cannotreadproperty'custom'ofundefined因为这个错误，我重新启动了一个新的项目，并一一安装插件来定位错误...后来发现了这个问题：https://github.com/vitejs/vit...并更新了它vite版本就好了！！！9、某页面热更新无效。本页面修改后不会自动更新，其他页面可以！原因：文件名大小写导致页面文件名使用大写字母Login.vue，在vue-router中是用小写字母写的，页面可以访问但是不能更新。修正后恢复正常。10.控制台警告Instanceuid=0:20notfound。写项目时不时报这个错。我还没有找到原因。后来发现应该是devtools的问题。关闭控制台重新打开后，就不会报错了！11、导入组件时，没有加.vue后缀，报错Failedtofetchdynamicallyimportedmodule...加了.vue后就好了！12.动态导入图片
