uni-app 选择vue3发行到H5 引入.wxs文件的地方打包报错

uni-app 选择vue3发行到H5 引入.wxs文件的地方打包报错

示例代码：

<script src="./index.wxs" module="handler" lang="wxs"></script>

操作步骤：

  • 选择vue3 发行 H5时报错，排查到问题是因为引入了wxs文件
  • 报错信息：… Illegal tag name. Use ‘<’ to print ‘<’. …
  • 使用官方Hello项目发行也会出现此错误。

预期结果：

  • 引入wxs文件打包不出错

实际结果：

  • 打包出错，无法打包

bug描述：

  • 选择vue3 发行 H5时报错，排查到问题是因为引入了wxs文件
  • 报错信息：… Illegal tag name. Use ‘<’ to print ‘<’. …
  • 使用官方Hello项目发行也会出现此错误。

更多关于uni-app 选择vue3发行到H5 引入.wxs文件的地方打包报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

wxs文件中有代码时会报错

更多关于uni-app 选择vue3发行到H5 引入.wxs文件的地方打包报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


可以更新到正式版，HBuilderX 3.3.3

3.3.5也报这个错

回复 1***@163.com: 发测试工程

在 uni-app 的 Vue 3 版本中，.wxs 文件是专为微信小程序设计的模块系统，不支持在 H5 平台使用。当你尝试在 H5 平台引入 .wxs 文件时，Vue 3 的编译器无法识别这种语法，导致打包错误。

错误信息 Illegal tag name. Use '<' to print '<'. 表明编译器将 <script src="./index.wxs" module="handler" lang="wxs"></script> 中的内容误解为 Vue 模板中的非法标签。这是因为在 Vue 3 的 H5 编译环境中，这种写法不被支持。

解决方案：

  1. 条件编译：使用 uni-app 的条件编译语法，仅在微信小程序平台引入 .wxs 文件。修改代码如下：

    <!-- #ifdef MP-WEIXIN -->
<script src="./index.wxs" module="handler" lang="wxs"></script>
<!-- #endif -->

    这样，在 H5 平台打包时会忽略这段代码，避免错误。

  2. 替代实现：如果需要在 H5 平台实现类似 .wxs 的功能（如数据处理），建议使用 Vue 3 的 computed 计算属性或普通 JavaScript 函数。例如，将 .wxs 中的逻辑移入 Vue 组件的 <script setup> 中：

    // 替代 handler 模块的功能
const handler = {
  // 在这里实现原有 .wxs 中的函数
};
回到顶部