uni-app 微信小程序下 uni_modules 插件中使用 "../../" 引用 static 中的资源提示找不到

uni-app 微信小程序下 uni_modules 插件中使用 “…/…/” 引用 static 中的资源提示找不到

操作步骤：

1、uni_modules 目录下 新建一个 aaa 的项目
2、aaa 中有 components/aaa/aaa.vue
3、aaa 中有 static/aaa/images/c.svg
4、aaa.vue 中使用 …/…/ static/images/c.svg 的方式引用静态资源
5、运行到微信小程序就提示无法找到资源

预期结果：

根H5一样，…/…/ 在转换绝对路径的时候能成功 “/uni_modules/mu-notice-bar/static/mu-notice-bar/images/right.svg”
而不是 “/static/mu-notice-bar/images/right.svg”

实际结果：

微信小程序下，绝对路径转换成了 “/static/mu-notice-bar/images/right.svg”

bug描述：

BUG背景：
在 uni_modules 目录中新建了一个插件，插件中 mu-notice-bar.vue 组件通过 “…/…/” 的相对路径引用了 “static” 文件夹下的 “right.svg”
页面在 H5 的情况下显示正常，微信小程序消失资源找不到i。

具体情况：
在 H5 环境下，"…/…/" 会自动转换成绝对路径 “/uni_modules/mu-notice-bar/static/mu-notice-bar/images/right.svg”，所以能正常访问。
而微信小程序下提示找不到资源，wxml 的编译结果显示的路径是 “/static/mu-notice-bar/images/right.svg” 但是资源并没有在这个目录下。所以访问不到。（资源在 /uni_modules/mu-notice-bar/static 目录下）

开发环境：

工具 版本
node ^20.12.2
npm ^10.5.0
yarn 1.22.19
vite 4.3.5

目录结构变化：资源目录并不在 src 中，全部提到了根目录。然后通过 修改运行命令 运行成功
“dev:mp-weixin”: “cross-env UNI_INPUT_DIR=./ UNI_OUTPUT_DIR=./uni_dev/mp-weixin uni -p mp-weixin”,

Image
Image


更多关于uni-app 微信小程序下 uni_modules 插件中使用 "../../" 引用 static 中的资源提示找不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

更新到最新 Alpha 版后试试

更多关于uni-app 微信小程序下 uni_modules 插件中使用 "../../" 引用 static 中的资源提示找不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 开发微信小程序时，如果在 uni_modules 插件中使用相对路径 "../../" 引用 static 中的资源时提示找不到，可能是由于以下原因导致的：

1. 路径问题

微信小程序的路径解析与 H5 或其他平台可能有所不同。在微信小程序中，相对路径的解析可能不会像预期那样工作。

2. uni_modules 插件的特殊性

uni_modules 插件是 uni-app 的模块化方案，它的路径解析可能与普通项目有所不同。插件中的资源路径可能需要根据插件的根目录来解析。

解决方案

方案 1: 使用绝对路径

在微信小程序中，建议使用绝对路径来引用资源。你可以使用 @/ 来表示项目的根目录。

// 例如，引用 static 中的图片
const imagePath = '@/static/your-image.png';

方案 2: 使用 require 或 import

你可以使用 require 或 import 来引入资源，这样可以确保路径的正确解析。

// 使用 require
const imagePath = require('@/static/your-image.png');

// 使用 import
import imagePath from '@/static/your-image.png';

方案 3: 使用 uni.getSystemInfoSync 获取小程序根路径

你可以通过 uni.getSystemInfoSync() 方法获取小程序的根路径，然后拼接出完整的资源路径。

const systemInfo = uni.getSystemInfoSync();
const imagePath = `${systemInfo.APP_BASE_PATH}/static/your-image.png`;

方案 4: 将资源放在 uni_modules 插件中

如果资源是插件的一部分，建议将资源直接放在 uni_modules 插件目录下，并使用相对路径引用。

// 假设资源在 uni_modules/your-plugin/static/your-image.png
const imagePath = '/uni_modules/your-plugin/static/your-image.png';
回到顶部