当直接将setup写在script标签上
会报错vue-router.mjs:3451 TypeError: Failed to fetch dynamically imported module:
这是setup语法糖导致的错误,此时就老老实实按照vue3原本的写法export default{xxxxxx}即可解决
vue3中setup语法糖写法:
<template>
<button @click="test">测试</button>
</template>
<script setup lang="ts">
import {
ref } from 'vue'
const a = ref(0);
const test = () => {
console.log(a)
}
</script>
<style scoped></style>
原始正常写法:
<template>
<div v-for="tag in tagList" :key="tag.id">
<span>{
{
tag.tagName }}</span>
</div>
</template>
<script lang="ts">
import {
getTags } from '@/api/tag';
import {
tag } from '@/types/api/tag';
import {
onMounted, ref } from 'vue';
export default {
name: "Labels",
setup() {
let tagList = ref<tag[]>([])
//获取所有标签
const getAllTags = async () => {
const res = await getTags();
tagList.value = res.data;
}
onMounted(() => {
getAllTags();
})
return {
tagList,
}
}
}
</script>
<style scoped>
</style>
改成原始写法后就不报错了!!!看来还是不能偷懒呀~