onLoad: function(jsName) {
// 假设从后端获取的返回值是 'json'
//const scriptName = 'json';
this.loadScript("./json.js").then(data => {
this.setData({
tabbar: data
});
}).catch(err => {
console.error('Failed to load script:', err);
});
},
onReady() {
this.getMenuItemTop()
},
methods: {
// 动态加载脚本的方法
async loadScript(scriptPath) {
try {
const module = await import(scriptPath);
return module.default || module;
} catch (error) {
throw new Error(`Failed to import script at ${scriptPath}: ${error}`);
}
},
7***@qq.com
- 发布：2024-07-17 21:42
- 更新：2024-07-18 17:36
- 阅读：188
你好， vue2的项目的动态加载模块是基于webpack的， webpack的import不能很好的支持动态加载功能。 这边推荐两种解决方案
方案一. 使用webpack 的require.context 技术来实现 动态加载模块。webpack文档 require.context
demo 如下
{
onLoad() {
this.loadScript('./json.js').then((res) => {
console.log({res})
})
},
methods: {
async loadScript(scriptPath) {
var context = require.context('./', true, /\.js$/, 'lazy');
const module = await context(scriptPath)
return module.default || module;
},
},
}方案二. 根据项目大小，可以考虑升级为vue3 项目， vue3项目底层基于vite构建，动态加载模块功能可以正常使用
