vite构建vue3+ts项目 页面报红

Question

亲们 这个是怎么回事啊 就是vite构建的vue3+ts的项目 引入和使用时 vscode都会报红 但是启动没错误，页面也正常打开，怎么把这些报红去掉啊，我需要安装什么插件吗 。麻烦了

亲们 这个是怎么回事啊 就是vite构建的vue3+ts的项目 引入和使用时 vscode都会报红 但是启动没错误，页面也正常打开，怎么把这些报红去掉啊，我需要安装什么插件吗 。麻烦了

Answer 1

中午好🌞🌞🌞
本答案参考ChatGPT-3.5

看起来你正在使用Vite构建Vue3 + TypeScript项目，并且在VSCode中遇到了一些编译错误。报红通常是因为缺少类型提示或者对某些库的正确配置。以下是可能的解决方案：

1. 安装类型声明文件：

   • 如果VSCode提示缺少某个库的类型支持，你需要安装相应的TypeScript声明文件。例如，对于ref库，你可能需要安装@types/vue-ref。在终端或命令行中运行以下命令：

   npm install @types/vue-ref --save-dev
   

   或者如果使用Yarn：

   yarn add @types/vue-ref --dev
   

2. 更新tsconfig.json：

   • 确保tsconfig.json中设置了正确的配置，比如jsx选项和noImplicitAny。添加以下配置以启用类型检查：

   {
     "compilerOptions": {
       "jsx": "preserve",
       "noImplicitAny": false,
       // 其他配置...
     }
   }
   

   如果你已经设置了这些，但仍然有错误，检查jsx选项是否与你的项目需求匹配。

3. 修复引用：

   • 检查代码中是否有错误的导入路径，比如Child.vue的引入。确保路径正确无误：

   <script setup lang="ts" src="/path/to/Child.vue"></script>
   

   请替换实际的文件路径。

4. 检查emit函数：

   • 在Parent.vue中的defineEmits应该如下所示：

   <script setup lang="ts">
     import { defineEmits } from 'vue';
     const emit = defineEmits(['sendData', { num: Number, msg: String }]);
   </script>
   

   确保emit函数的参数类型和定义一致。

5. vite.config.ts配置：

   • 确保你的Vite配置中已经处理了TypeScript的编译。如果还没配置，可以参考官方文档添加：

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   
   export default defineConfig({
     plugins: [vue()],
     build: {
       target: 'esnext',
       transpileDependencies: true, // 如果有第三方库未包含类型声明
     },
   });
   

6. 忽略文件：

   • 如果某些文件（如.gitignore）不需要编译，确保它们被正确地忽略了。例如，package-lock.json通常是不需要编译的，可以在.gitignore中添加：

   package-lock.json
   

完成以上步骤后，重新启动你的项目，看看是否还有报红。如果问题仍未解决，你可以尝试更新依赖包或者检查项目设置。希望这能帮到你！