HBuilderX更新到最新后 uni-app vue3.5.14 @vue/runtime-core也是3.5.14 动态计算高是报运行时和shared错误
HBuilderX更新到最新后 uni-app vue3.5.14 @vue/runtime-core也是3.5.14 动态计算高是报运行时和shared错误
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
PC开发环境操作系统 | Windows | |
PC开发环境操作系统版本号 | windows11 | |
第三方开发者工具版本号 | 最新稳定 | |
基础库版本号 | 最新稳定 | |
CLI版本号 | 最新 | CLI |
示例代码:
<template>
<view class="view-style"
style="{width: `${props.viewWidth}rpx`,
height: `${props.viewHeight}rpx`,
backgroundColor: props.viewBgColor}">
<uni-icons class="icon-style"
fontFamily="props.iconFamily"
color="props.iconColor"
size={`${props.iconSize}rpx`}>
{{ props.iconCode }}
</uni-icons>
<!--suppress TypeScriptValidateTypes -->
<input class="input-style"
placeholder="props.iPlaceholder"
type="props.iType"
password="props.isPwd"
confirm-type="props.iConfirmType"
style="{'background-color': props.iNBgColor, width: GetInputWidth}">
</input>
</view>
</template>
<script setup lang="ts">
import {ColorVariables} from "@/common/colors/Colors.ts";
import {computed} from "[@vue](/user/vue)/runtime-core";
interface Props {
viewWidth?: number;
viewHeight?: number;
viewBgColor?: string;
iconCode?: string;
iconColor?: string;
iconSize?: number;
iconFamily?: string;
iPlaceholder?: string;
iFontFamily?: string;
iType?: string;
isPwd?: boolean;
iConfirmType?: string;
iNBgColor?: string;
}
let props = withDefaults(defineProps<Props>(), {
viewWidth: 500,
viewHeight: 60,
viewBgColor: ColorVariables.bgC3,
iconCode: "",
iconColor: ColorVariables.tC1,
iconSize: 30,
iconFamily: "iconFont",
iPlaceholder: "",
iFontFamily: "customFont",
iType: "text",
isPwd: false,
iConfirmType: "text",
iNBgColor: ColorVariables.bgC5,
});
let GetInputWidth = computed<string>(() =>
{
return props.viewWidth - (10 + props.iconSize + 8) - 20 + 'rpx';
});
</script>
<style scoped lang="less">
@import "@/Style.less";
.view-style
{
display: flex;
border: 2rpx solid @bL1;
border-radius: 10rpx;
align-items: center;
}
/* #ifndef MP-WEIXIN */
.icon-style
{
margin-left: 10rpx;
}
/* #endif */
/* 微信小程序专用样式 */
/* #ifdef MP-WEIXIN */
.icon-style
{
margin-left: 10rpx;
margin-bottom: 5rpx;
}
/* #endif */
.input-style
{
margin-left: 8rpx;
margin-top: 5rpx;
}
</style>
### 操作步骤:
vue使用3.5.14,[@vue](/user/vue)/runtime-core也是3.5.14,微信小程序,动态计算input的宽度时报该错误。在“:style="{'background-color': props.iNBgColor, width: GetInputWidth}” 这行代码中使用GetInputWidth动态计算宽度时,编译报错
预期结果:
正常计算出高度
### 实际结果:
编译时报该错误
bug描述:
node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js (8:293): “getEscapedCssVarName” is not exported by “node_modules/@vue/shared/dist/shared.esm-bundler.js”, imported by “node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js”. file: E:/HBuilderXWorkspace/xinyi-app/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:8:293
更多关于HBuilderX更新到最新后 uni-app vue3.5.14 @vue/runtime-core也是3.5.14 动态计算高是报运行时和shared错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html
vue的版本使用 3.4.21呢?和uniapp内部的vue版本保持一致,看下还有没有问题
更多关于HBuilderX更新到最新后 uni-app vue3.5.14 @vue/runtime-core也是3.5.14 动态计算高是报运行时和shared错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html
有问题
回复 z***@foxmail.com: 发个可复现demo
回复 DCloud_UNI_JBB: 我重新建一个项目 按照你说调成3.4.21 小程序是可以了 但是运行到安卓模拟器又不可以了,进去直接白屏也不报错。我模拟器用的mumu4.1.25
我把项目压缩上传到附件上面了
demo
发不到你发的附件
回复 DCloud_UNI_JBB: 不知道是不是我的写法错误,我把那个计算款度的函数去掉 computed 貌似也可以,我就这样修改了
回复 DCloud_UNI_JBB: 不知道为啥 我附件上传不上去
回复 z***@foxmail.com: 附件可以通过im发给我
回复 DCloud_UNI_JBB:怎么发?你给我一个你的地址 我没有找到地址
回复 z***@foxmail.com: https://im.dcloud.net.cn/index.html#/ 这里
搜索我的名字
这是一个典型的Vue版本依赖冲突问题。根据错误信息分析,问题出在@vue/runtime-core和@vue/shared版本不匹配上。
错误原因:
- 您项目中使用的@vue/runtime-core是3.5.14版本
- 但@vue/shared可能不是对应的3.5.14版本
- runtime-core尝试从shared导入getEscapedCssVarName方法但失败
解决方案:
- 删除node_modules和package-lock.json/yarn.lock
- 确保package.json中所有Vue相关依赖版本一致:
"vue": "3.5.14", "[@vue](/user/vue)/compiler-sfc": "3.5.14", "[@vue](/user/vue)/runtime-core": "3.5.14", "[@vue](/user/vue)/shared": "3.5.14"
- 重新安装依赖:npm install
代码修正建议:
- 修改计算属性返回类型:
const GetInputWidth = computed(() => `${props.viewWidth - (10 + props.iconSize + 8) - 20}rpx`)
- 修改样式绑定语法:
:style="{backgroundColor: props.iNBgColor, width: GetInputWidth}"