uni-app vue3 vue-cli构建 无法正确编译icon到qq平台

uni-app vue3 vue-cli构建 无法正确编译icon到qq平台

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

bug描述：

无论是colorui 的icon 还是uni-ui的icon都无法正确编译到qq小程序上。微信能正确编译

示例代码：

{
"name": "uni-preset-vue",
"version": "0.0.0",
"scripts": {
"dev:custom": "uni -p",
"dev:h5": "uni",
"dev:h5:ssr": "uni --ssr",
"dev:mp-alipay": "uni -p mp-alipay",
"dev:mp-baidu": "uni -p mp-baidu",
"dev:mp-jd": "uni -p mp-jd",
"dev:mp-kuaishou": "uni -p mp-kuaishou",
"dev:mp-lark": "uni -p mp-lark",
"dev:mp-qq": "uni -p mp-qq",
"dev:mp-toutiao": "uni -p mp-toutiao",
"dev:mp-weixin": "uni -p mp-weixin",
"dev:mp-xhs": "uni -p mp-xhs",
"dev:quickapp-webview": "uni -p quickapp-webview",
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
"build:custom": "uni build -p",
"build:h5": "uni build",
"build:h5:ssr": "uni build --ssr",
"build:mp-alipay": "uni build -p mp-alipay",
"build:mp-baidu": "uni build -p mp-baidu",
"build:mp-jd": "uni build -p mp-jd",
"build:mp-kuaishou": "uni build -p mp-kuaishou",
"build:mp-lark": "uni build -p mp-lark",
"build:mp-qq": "uni build -p mp-qq",
"build:mp-toutiao": "uni build -p mp-toutiao",
"build:mp-weixin": "uni build -p mp-weixin",
"build:mp-xhs": "uni build -p mp-xhs",
"build:quickapp-webview": "uni build -p quickapp-webview",
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
"build:quickapp-webview-union": "uni build -p quickapp-webview-union"
},
"dependencies": {
"@dcloudio/uni-app": "3.0.0-4050720250324001",
"@dcloudio/uni-app-harmony": "3.0.0-4050720250324001",
"@dcloudio/uni-app-plus": "3.0.0-4050720250324001",
"@dcloudio/uni-components": "3.0.0-4050720250324001",
"@dcloudio/uni-h5": "3.0.0-4050720250324001",
"@dcloudio/uni-mp-alipay": "3.0.0-4050720250324001",
"@dcloudio/uni-mp-baidu": "3.0.0-4050720250324001",
"@dcloudio/uni-mp-harmony": "3.0.0-4050720250324001",
"@dcloudio/uni-mp-jd": "3.0.0-4050720250324001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-4050720250324001",
"@dcloudio/uni-mp-lark": "3.0.0-4050720250324001",
"@dcloudio/uni-mp-qq": "3.0.0-4050720250324001",
"@dcloudio/uni-mp-toutiao": "3.0.0-4050720250324001",
"@dcloudio/uni-mp-weixin": "3.0.0-4050720250324001",
"@dcloudio/uni-mp-xhs": "3.0.0-4050720250324001",
"@dcloudio/uni-quickapp-webview": "3.0.0-4050720250324001",
"animate.css": "^4.1.1",
"vue": "^3.4.21",
"vue-i18n": "^9.1.9"
},
"devDependencies": {
"@dcloudio/types": "^3.4.8",
"@dcloudio/uni-automator": "3.0.0-4050720250324001",
"@dcloudio/uni-cli-shared": "3.0.0-4050720250324001",
"@dcloudio/uni-stacktracey": "3.0.0-4050720250324001",
"@dcloudio/vite-plugin-uni": "3.0.0-4050720250324001",
"@vue/runtime-core": "^3.4.21",
"sass": "^1.86.0",
"vite": "5.2.8"
}

操作步骤：

    <text class="cuIcon-edit"></text>  
    <uni-icons type="edit" size="20" color="#999"></uni-icons>这两个都无法正确编译 已确认微信端正常

更多关于uni-app vue3 vue-cli构建 无法正确编译icon到qq平台的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

确认引入无问题。微信能正常显示

更多关于uni-app vue3 vue-cli构建 无法正确编译icon到qq平台的实战教程也可以访问 https://www.itying.com/category-93-b0.html


方便发个复现demo嘛

可能是我配置问题。新开了一个demo没问题

可以关了

好的

这是一个QQ小程序平台对icon处理方式不同导致的兼容性问题。建议尝试以下解决方案：

  1. 检查QQ小程序项目目录下的project.config.json文件，确保已正确配置"miniprogramRoot": "./"

  2. 对于uni-ui的图标，可以尝试显式引入图标组件：

import { createSSRApp } from 'vue'
import { Icon } from 'uni-ui'
const app = createSSRApp(App)
app.component('uni-icons', Icon)
  1. 对于ColorUI的图标，确保在App.vue中正确导入了样式：
@import "colorui/main.css";
@import "colorui/icon.css";

  1. 检查QQ小程序开发者工具是否是最新版本，旧版本可能存在编译兼容性问题

  2. 可以尝试在manifest.json中配置QQ小程序特有的编译选项：

"mp-qq": {
  "usingComponents": true
}
回到顶部