uni-app Vue3的renderjs无法引入js或css

发布于 1周前 作者 itying888 来自 uni-app

uni-app Vue3的renderjs无法引入js或css

产品分类

uniapp/App

示例代码

<script lang="renderjs" module="video">  
    // import * as utils from 'uni_modules/wxy-ui/libs/function/Utils.js';  
    import * as utils from '@/static/Utils.js';  
       .......  
</script>

操作步骤

<script lang="renderjs" module="video">  
    // import * as utils from 'uni_modules/wxy-ui/libs/function/Utils.js';  
    import * as utils from '@/static/Utils.js';  
       .......  
</script>

预期结果

<script lang="renderjs" module="video">  
    // import * as utils from 'uni_modules/wxy-ui/libs/function/Utils.js';  
    import * as utils from '@/static/Utils.js';  
       .......  
</script>

Vue3的renderjs应该可以正常加载Utils.js文件

实际结果

Vue3的renderjs报Could not resolve "@/static/Utils.js"错误

bug描述

以上引入在Vue2中没有问题，但Vue3提示Could not resolve “@/static/Utils.js”。 相关问题：

  • vue3的renderjs中使用import 引入 报错: 链接
  • 使用vue3打包安卓app时 renderJS 获取不到上面js参数: 链接
  • vue3模式下，renderjs中的@的路径别名失效: 链接

DCloud_UNI_OttoJi 回复过【vue3的renderjs中使用import 引入 报错】,但后来没说是否修复

图片

开发环境信息

项目创建方式 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 手机系统 手机系统版本号 手机厂商 手机机型 页面类型 vue版本 打包方式
HBuilderX Windows windows10 正式 4.45 Android Android 10 华为 华为mate10 vue vue3 云端

Harmonyos Next教程
1 回复

在uni-app中，renderjs 是一种在视图层（WebView）直接运行 JavaScript 的技术，它允许开发者利用更强大的 JavaScript 能力来操作 DOM 和执行一些高性能的操作。然而，由于 renderjs 运行环境与传统的 Vue 组件环境有所不同，它确实存在一些限制，特别是在引入外部 JS 或 CSS 文件方面。

renderjs 环境不支持通过传统的 <script> 或 <link> 标签来引入外部资源，因为这些操作需要在 DOM 完全加载之前完成，而 renderjs 是在 DOM 已经加载完成后才执行的。因此，我们需要采用其他方式将外部 JS 或 CSS 注入到 renderjs 环境中。

引入外部 JS

对于外部 JS 文件，你可以考虑将 JS 文件的内容直接嵌入到 renderjs 的脚本中，或者使用 AJAX 请求动态加载并执行 JS 代码。以下是一个使用 AJAX 请求加载并执行外部 JS 的示例：

// 在 renderjs 中
export default {
  mounted() {
    uni.request({
      url: 'https://example.com/your-script.js', // 外部 JS 文件的 URL
      success: (res) => {
        const script = document.createElement('script');
        script.textContent = res.data;
        document.head.appendChild(script);
        // 或者使用 eval 执行，但注意安全性问题
        // eval(res.data);
      },
      fail: (err) => {
        console.error('Failed to load external JS:', err);
      }
    });
  }
}

引入外部 CSS

对于外部 CSS 文件，你可以使用类似的方法通过 AJAX 请求获取 CSS 内容，并将其动态注入到 <style> 标签中：

// 在 renderjs 中
export default {
  mounted() {
    uni.request({
      url: 'https://example.com/your-styles.css', // 外部 CSS 文件的 URL
      success: (res) => {
        const style = document.createElement('style');
        style.textContent = res.data;
        document.head.appendChild(style);
      },
      fail: (err) => {
        console.error('Failed to load external CSS:', err);
      }
    });
  }
}

需要注意的是，由于 renderjs 运行在视图层，它不受 Vue 的响应式系统控制，因此任何在 renderjs 中对 DOM 或样式的修改都不会触发 Vue 的更新机制。此外，使用 eval 或动态插入 <script>/<style> 标签可能存在安全风险，特别是在处理不受信任的外部资源时。因此，在生产环境中使用时，请务必确保资源来源的可靠性。

回到顶部