uni-app打包微信小程序后，页面引用的vue文件实际指向nvue文件

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app打包微信小程序后，页面引用的vue文件实际指向nvue文件

操作步骤：

  • rt

预期结果：

  • rt

实际结果：

  • rt

bug描述：

项目中有page1.vue,page1.nvue和两个组件component1.vue,component1.nvue，page1.vue引用了component1.vue组件，page1.nvue引用了component1.nvue组件，实际打包到微信小程序后，实际显示的是page1.vue以及component1.nvue

Harmonyos Next教程
3 回复

截图看下你的文件目录 还有你是怎么引入的 可以发下复现demo吗？


找到问题了哈，很多文件都引用了组件，有一个组件引用的nvue，把vue的覆盖了

在uni-app中，当你遇到页面引用的Vue文件实际指向nvue文件的问题时，这通常是由于配置错误或者理解上的误区导致的。在uni-app中，Vue文件用于WebView渲染，而nvue文件用于Weex引擎渲染，它们适用于不同的场景。下面是一个可能的解决方案，确保你的页面引用正确，同时展示如何在配置文件中进行适当设置。

首先，确保你的项目结构清晰，Vue文件和nvue文件分别放置在合适的目录下。例如，Vue文件通常放在pages目录下，而nvue文件可以放在nvue目录下（这取决于你的项目配置）。

1. 页面引用检查

确保在你的pages.json文件中正确配置了页面路径。对于Vue页面，路径应该指向.vue文件；对于nvue页面，路径应该指向.nvue文件。

{
  "pages": [
    {
      "path": "pages/index/index", // 指向Vue文件
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "nvue/map/map", // 指向nvue文件
      "style": {
        "navigationBarTitleText": "地图"
      }
    }
  ]
}

2. 条件编译

如果你需要在不同平台下使用不同的文件类型，可以利用uni-app的条件编译功能。例如，你可以在pages.json中使用条件编译来区分微信小程序和其他平台。

{
  "pages": [
    {
      "path": "__UNI__APPLETS__/pages/index/index", // 微信小程序使用nvue
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/index/index", // 其他平台使用vue
      "style": {
        "navigationBarTitleText": "首页"
      },
      "condition": {"platform": ["h5", "app-plus", "alipay", "toutiao", "qq", "kuaishou", "jd"]}
    }
  ]
}

注意：上面的__UNI__APPLETS__是一个假设的路径前缀，用于示例。实际上，你可能需要在构建脚本中处理这种路径替换，或者通过其他方式确保微信小程序使用nvue文件。

3. 构建脚本处理

如果你需要在构建过程中自动处理Vue到nvue的转换或路径替换，可以编写自定义的构建脚本。这通常涉及到对pages.json和其他相关配置文件的动态修改。

结论

确保你的页面引用和配置正确无误是解决这个问题的关键。通过检查pages.json配置，利用条件编译，以及可能的构建脚本处理，你可以确保uni-app在打包微信小程序时，页面引用的文件类型符合预期。上述代码示例提供了一个基本的框架，你可以根据实际需求进行调整和扩展。

回到顶部