uni-app 使用vue-cli创建的项目中原生插件的res文件打包不进去

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

uni-app 使用vue-cli创建的项目中原生插件的res文件打包不进去

操作步骤

按照如上打包测试即可

预期结果

能正常使用

实际结果

打包后的解压后找不到res下的安全图资源

bug描述

使用vue-cli创建的项目，原生插件的res目录下的图片资源打包不进去，以下是使用vue-cli创建的项目和使用unipp创建的项目打包后压缩包的目录截图

vue-cli创建的项目插件目录包截图

开发环境及版本信息

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

Harmonyos Next教程
5 回复

第二张图发错了 15：30的时候尝试使用本地插件打包 插件目录放在根目录下的 如果放在src下的manifest.json同级，hx就读取不到本地插件


res混淆关闭的已经配置了 也不行

从后台打包日志查到你的项目是cli类型项目，cli版本是4.29，因此提交云端打包分配的是4.29打包机。 “enableResourceOptimizations”: false 配置项需要更新到4.33及以上版本才生效。请更新cli到最新版本重新提交云端打包。

好的 感谢 已经解决

在 uni-app 中使用 vue-cli 创建项目时，如果遇到原生插件的 res 文件打包不进去的问题，通常是因为这些资源文件没有被正确地添加到构建流程中。以下是一个示例，展示如何确保原生插件的资源文件被正确地打包进项目中。

步骤 1: 确保资源文件被正确引用

首先，确保你的原生插件资源文件（如图片、音频等）放置在正确的目录下。在 uni-app 项目中，原生插件的资源通常放在 native-plugins 目录下的对应插件文件夹中。

步骤 2: 修改 webpack 配置

由于 uni-app 基于 Vue CLI，你可以通过修改 vue.config.js 文件来自定义 webpack 配置。以下是一个示例，展示如何添加自定义的 copy-webpack-plugin 插件来复制资源文件到构建输出目录。

首先，安装 copy-webpack-plugin：

npm install copy-webpack-plugin --save-dev

然后，在 vue.config.js 中配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, 'native-plugins/your-plugin-name/res'),
            to: path.resolve(__dirname, 'dist/native/plugins/your-plugin-name/res'), // 根据你的项目结构调整路径
            toType: 'dir'
          }
        ]
      })
    ]
  }
};

步骤 3: 确保原生插件正确引用资源

在你的原生插件代码中，确保资源文件的路径是相对于插件安装目录的。例如，如果你的插件安装在 native/plugins/your-plugin-name/ 目录下，那么在插件代码中引用资源文件时，应该使用相对路径，如 ../res/your-image.png。

步骤 4: 构建项目

运行构建命令：

npm run build:mp-weixin  # 或者其他平台，根据你的需求

构建完成后，检查构建输出目录（如 dist/native/plugins/your-plugin-name/res），确保资源文件已经被正确复制。

通过上述步骤，你应该能够解决 uni-app 中原生插件资源文件打包不进去的问题。如果资源文件仍然没有被包含，请检查路径配置是否正确，以及 webpack 插件是否按预期执行。

回到顶部