TIP
截止至 2021-07-16 ,< script setup> 方案已在 Vue 3.2.0-beta.1 版本中脱离实验状态,正式进入 Vue 3.0 的队伍,在新的版本中已经可以作为一个官方标准的开发方案使用(但初期仍需注意与开源社区的项目兼容性问题,特别是 UI 框架)。
另外,Vue 的 3.1.2 版本是针对 script-setup 的一个分水岭版本,自 3.1.4 开始 script-setup 进入定稿状态,部分旧的 API 已被舍弃,

项目场景:

项目版本:
vue版本3.2.31 + 使用 setup 函数的语法糖
出现了ReferenceError: _unref is not defined的错误


问题描述

在vue3.2+版本上,使用< script setup> 方案时代码如下:

<template>
    <img :src="require(`@/assets/images/icon_num_${state.lotteryNum}.png`)" alt="" />
</template>
<script setup lang="ts">
import {reactive} from 'vue'
const state = reactive({
    lotteryNum:1,
})
</script>

在本地运行时,是没有问题的。
但是在打包,放到线上之后,控制台会出现报错信息:ReferenceError: _unref is not defined在这里插入图片描述


原因分析:

个人猜测是:Build 不会解析 :src=“require()” 中的计算属性。


解决方案:

暂时不要这样使用

Logo

前往低代码交流专区

更多推荐