When writing the setup directly on the script tag
Will report an errorvue-router.mjs:3451 TypeError: Failed to fetch dynamically imported module:
This is an error caused by setup syntax sugar. At this time, it can be solved by following the original writing method of vue3, export default{xxxxxx}
How to write setup syntax sugar in vue3:
<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>
Original normal writing:
<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>
After changing to the original writing method, the error will no longer appear! ! ! It seems I can’t be lazy~