uni-app Vue3微信小程序发行版import引入分包目录static下export defualt的js库因为undefined导致minxins报错

uni-app Vue3微信小程序发行版import引入分包目录static下export defualt的js库因为undefined导致minxins报错

项目信息 描述
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows11
HBuilderX类型 正式
HBuilderX版本号 4.65
第三方开发者工具版本号 1.06.2503290
基础库版本号 3.8.3
项目创建方式 HBuilderX

bug描述：

Vue3编译为微信小程序时，页面import引入export default的js库，在调试时有时能正常mixins，但发行版一定会因为它是undefined而导致mixins失败。通过查看编译后微信小程序源代码，发现是uniapp编译的问题。

目前也找到解决问题的办法了，也许是官方未详细说明，就是将js或css不要放在static目录下，uniapp编译时根据引用自动调整。详细可见后面第二个补充中说明和源码

示例代码

操作步骤：

import filepickerMixin from "./static/js/wxy-file-picker-mixin.js";  
export default {  
    mixins:[filepickerMixin],//可以混入filepickerMixin   
}

更多关于uni-app Vue3微信小程序发行版import引入分包目录static下export defualt的js库因为undefined导致minxins报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

目前测试可以的替补方案:
微信小程序 可以使用require或import引入非export default的库，测试通过Vue2和Vue3的发行版
require导入 //CommonJS模块系统
function test(str) {
return str;
}

module.exports = {
methods: {
test,
},
}; 文件名为wxy-file-picker.js，引入方式为const filepicker = require("./static/js/wxy-file-picker.js");然后可以mixins:[filepicker]当前页面。
import导入非export default的库 //ES6模块系统
export const filepickerESM = {
methods: {
test(str) {
return str;
},
},
}; 文件名为wxy-file-picker-esm.js，引入方式为import {filepickerESM} from “./static/js/wxy-file-picker-esm.js”;然后可以mixins:[filepickerESM]当前页面。
app端 app端在Vue3不支持require，可以import引入export default和非export default的库。其中引入非export default的库可参考微信小程序中部分。 //Vue的script
export default {
data() {
return {};
},
methods: {
test(str) {
return str;
},
},
} 文件名为wxy-file-picker-mixin.js，引入方式为import filepickerMixin from “./static/js/wxy-file-picker-mixin.js”;然后可以mixins:[filepickerMixin]当前页面。
app端和微信小程序端 通过上面测试，在Vue3页面引入js库，为兼容app和微信小程序，在官方未修复的情况下，只能使用import导入非export default解决问题。希望官方早日修复这个编译的问题，同时也希望早点修复Vue3版renderjs引入js的问题。本来想将项目从Vue2升级为Vue3呢，结果在升级过程中，除了官方vue2升vue3指南https://uniapp.dcloud.net.cn/tutorial/migration-to-vue3.html外，还有不少坑需要解决，也不知道已经使用Vue3开发微信小程序兄弟是如何解决这些坑。
项目源码文件如下

更多关于uni-app Vue3微信小程序发行版import引入分包目录static下export defualt的js库因为undefined导致minxins报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


继续上面进行补充，后来再测试时，发现分包目录中只要不是static目录下js，uniapp编译会进行调整，如分包目录pages_index\libs\wxy-file-picker-mixin.js export default {
data() {
return {};
},
methods: {
test(str) {
return str;
},
},
} 在微信小程序中import filepickerMixin2 from “…/libs/wxy-file-picker-mixin.js”;编译后被uniapp调整为如下 “use strict”;const t={data:()=>({}),methods:{test:t=>t}};exports.filepickerMixin2=t; 这样官方又支持import导入export default的库了。只不过要注意不要放在分包static目录下，估计uniapp对static排除处理了。
归纳总结 app端和微信小程序import分包中js库时，若是export default时务必不要放在分包的static目录，可以命名一个目录如libs或者直接放在分包根目录下。若放在分包static目录下，需要自己完成转换，可参考uniapp官方，也可参考上面非export default完成。
源代码包见bug2.rar

这是一个典型的uni-app编译微信小程序时static目录资源引用问题。根据你的描述，问题主要出在将JS库放在static目录下导致的编译异常。

核心原因是：uni-app编译微信小程序时，static目录下的文件会被直接拷贝到dist目录，不会经过webpack处理。这会导致：

  1. 调试时可能正常是因为HBuilderX的热更新机制
  2. 发行版一定会失败，因为未经处理的JS模块无法正确导入

解决方案确实如你所发现的：

  1. 不要将需要import的JS/CSS放在static目录
  2. 应该将这些文件放在项目普通目录中(如common/utils等)
  3. 让uni-app的编译系统自动处理模块依赖

正确的目录结构应该是：

project
├── common
│   └── mixins
│       └── wxy-file-picker-mixin.js
└── pages

引用方式改为：

import filepickerMixin from "@/common/mixins/wxy-file-picker-mixin.js"
回到顶部