不知道什么原因报错的

Question

我又遇到了一个很奇怪的问题，启动项目的时候报错，告诉我

我之前还好好的，只写到了console.log(route) 然后就报错了，不知道为啥

<template>
    detail
</template>

<script setup lang="ts">
    import {reactive} from 'vue'
    import { useRoute } from 'vue-router';

    // const route=useRoute()
    // console.log(route);
    
</script>

指定了我的home.vue，下面是所有的内容

<template>
    <div class="search_div">

    </div>
    <div class="suggest_div">
        <div class="sort">
            <p>综合分类</p>
            <p>销量</p>
            <p @click="priceSort">价格</p>
        </div>
        <div class="category">
            <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1" @change="handleChange" />
                <van-dropdown-item v-model="value2" :options="option2" />
            </van-dropdown-menu>
        </div>
    </div>
    <div class="goods_div">
        <ul v-for="item in filteredGoods" :key="item._id" >
            <li @click="detail(item._id)">
                <h3>{{ item.title }}</h3>
                <h5>{{ item.price }}</h5>
            </li>
        </ul>
       
    </div>
</template>

<script setup lang="ts">

    import {ref,reactive, onMounted,computed} from 'vue'
    import 'vue-router/types/router'
    import axios from 'axios'
    import { Goods } from '../interface/goods';
    import {useRouter} from 'vue-router'

    const sortFlag=ref<boolean>(false)
    const goods=reactive<{list:Goods[],detailGoods:Goods[]}>({
        list:[],
        detailGoods:[]
    })
    const router=useRouter()

    const value1 = ref(0);
    const value2 = ref('a');
    const val=ref<string|number>('')

    const option1 = [
      { text: '品牌', value: 0 },
      { text: '华为', value: '华为' },
      { text: '苹果', value: '苹果' },
    ];
    const option2 = [
      { text: '默认排序', value: 'a' },
      { text: '好评排序', value: 'b' },
      { text: '销量排序', value: 'c' },
    ];

    const getGoods=async ()=>{
        const {data}=await axios.get('http://localhost:3000/goods')
        goods.list=data
    }

    onMounted(()=>{
        getGoods()  

    })

    const priceSort=()=>{
        sortFlag.value=!sortFlag.value
        goods.list.sort((a,b)=>{
            if(sortFlag.value===false){
                return a.price-b.price
            }else{
                return b.price-a.price
            }
        })
    }

    const filteredGoods = computed(() => {
        if(val.value==='' || val.value===0){
            return goods.list
        }else{
            return goods.list.filter((item) => item.tables === val.value!);
        }
    });

    const handleChange=(value:string | number)=>{
        val.value=value
    }
    const detail=async (id:string)=>{
        console.log(id);
        
        // const {data}=await axios.post('http://localhost:3000/detail',{id})
        // router.push({path:'/detail',query:{data}})
    }


</script>

<style scoped lang="scss">
    .search_div{
        width: 100%;
        height: 50px;
        background-color: cadetblue;
    }
    .suggest_div{
        width: 100%;
        height: 100px;
        background-color: aquamarine;
        .sort{
            p{
                display: inline-block;
                text-align: center;
                margin: 10px 40px
            }
        }
        .category{
            width: 100%;
            display: flex;
            p{
                display: inline-block;
                width: 20%;
                flex: 1;
                text-align: center;
            }
        }
    }
    .goods_div{
        ul{
            list-style: none;
            padding-left: 0;
            li{
                border: 2px solid gray;
                margin-top: 10px;
                padding: 10px;
            }
        }
    }
</style>

Answer 1

引自免费微信小程序：皆我百晓生

看起来你正在使用Vite构建Vue.js项目，并且在引入vue-router时遇到了问题。这个错误信息表明Vite找不到vue-router包中的.types/router模块。这可能是由于版本兼容性问题、配置错误或者是缓存导致的。

为了解决这个问题，请尝试以下步骤：

1. 更新依赖: 首先确保你的所有依赖都是最新的。运行以下命令来更新vue和vue-router到最新版本（如果有其他依赖也一并更新）：

   npm update -S vue vue-router
   

2. 清理缓存: 清理Vite的缓存以确保它不会加载旧的配置或文件。在项目根目录执行以下命令：

   npm run clear
   

3. 检查类型声明: 确保在项目的tsconfig.json中已经包含了对vue-router类型的支持。如果没有，添加以下内容：

   {
     "compilerOptions": {
       "paths": {
         "@/*": [
           "./src/*"
         ]
       },
       "baseUrl": ".",
       "typeRoots": ["node_modules/@types", "node_modules/vue/types"],
       "esModuleInterop": true,
       "allowSyntheticDefaultImports": true
     }
   }
   

4. 重新安装: 如果上述步骤没有解决问题，尝试移除并重新安装vue-router：

   npm uninstall vue-router
   npm install vue-router
   

5. 检查路由导入: 尽管你的代码片段显示你可能只是简单地取消了注释导入语句，但确保你在其他地方正确地导入并使用了useRoute。例如，在你的组件中，可以这样使用：

   <script setup lang="ts">
     import { onMounted, reactive } from 'vue';
     import { useRoute } from 'vue-router';
   
     let route = reactive({});
   
     onMounted(() => {
       route = useRoute();
       console.log(route);
     });
   </script>
   

按照这些步骤操作，你应该能解决这个问题。如果问题依然存在，那么可能需要提供更详细的项目结构和相关配置以便进行深入排查。