<template>
<view class="container">
演示Vue3版微信小程序import错误
</view>
</template>
<script>
// #ifdef VUE3
/**
* VUE3编译：app端不再支持require
* 微信小程序调试时全部支持，发行版不支持export defaut。（不知道什么不统一！！！，可能通过微信开发者查看源码是uniapp官方的问题)
*/
import {
filepickerESM
} from "./static/js/wxy-file-picker-esm.js";
console.log("filepickerESM =>", filepickerESM);
//微信小程序调试时支持，但发行版时是undefined。查看微信开发者中源码是uniapp编译的问题
import filepickerMixin from "./static/js/wxy-file-picker-mixin.js";
console.log("filepickerMixin =>", filepickerMixin);
// #endif
export default {
// #ifdef VUE3
// mixins: [filepickerESM],
mixins:[filepickerMixin],//微信小程序编译发行版，因为 filepickerMixin是undefined导致失败报错
// #endif
data() {
return {};
},
onReady() {
this.test1();
},
methods: {
test1() {
console.log('test =>', this.test("Hello World"));
},
},
}
</script>
<style lang="scss">
.container {
padding: 10px 20px;
}
</style>
吾逍遥
- 发布：2025-05-14 16:38
- 更新：2025-05-14 20:52
- 阅读：99
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows11
HBuilderX类型： 正式
HBuilderX版本号： 4.65
第三方开发者工具版本号： 1.06.2503290
基础库版本号： 3.8.3
项目创建方式： HBuilderX
示例代码：
操作步骤：
import filepickerMixin from "./static/js/wxy-file-picker-mixin.js";
export default {
mixins:[filepickerMixin],//可以混入filepickerMixin
}
import filepickerMixin from "./static/js/wxy-file-picker-mixin.js";
export default {
mixins:[filepickerMixin],//可以混入filepickerMixin
}预期结果：
filepickerMixin可以mixins混入当前页面
filepickerMixin可以mixins混入当前页面
实际结果：
因为Vue3发行版filepickerMixin是undefined导致失败
因为Vue3发行版filepickerMixin是undefined导致失败
bug描述：
Vue3编译为微信小程序时，页面import引入export default的js库，在调试时有时能正常mixins，但发行版一定会因为它是undefined而导致mixins失败。通过查看编译后微信小程序源代码，发现是uniapp编译的问题。
目前也找到解决问题的办法了，也许是官方未详细说明，就是将js或css不要放在static目录下，uniapp编译时根据引用自动调整。详细可见后面第二个补充中说明和源码
吾逍遥 (作者) - 北京九思自然科技
目前测试可以的替补方案:
微信小程序
可以使用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开发微信小程序兄弟是如何解决这些坑。
项目源码文件如下
吾逍遥 (作者) - 北京九思自然科技
继续上面进行补充，后来再测试时，发现分包目录中只要不是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
