require引入js vue_VueJs-动态加载依赖

import命令会被 JavaScript 引擎静态分析

// 报错

if (x === 2) {

import Haorooms from './Haorooms';

}

解决方案一：require加载

因为require是运行时加载模块，import命令无法取代require的动态加载功能。

在代码中动态加载依赖，例如下面echart主题，我们可以点击切换的时候，动态加载！

require("echarts/theme/"+ data.theme);

解决方法二：import()函数

例如：

const main = document.querySelector('main');import(`./section-modules/${someVariable}.js`)

.then(module => {

module.loadPageInto(main);

})

.catch(err => {

main.textContent = err.message;

});

按需加载。

button.addEventListener('click', event => {

import('./dialogBox.js')

.then(dialogBox => {

dialogBox.open();

})

.catch(error => {

/* Error handling */

})

});

条件加载

if (condition) {

import('moduleA').then(...);

} else {

import('moduleB').then(...);

}

动态的模块路径

import(f())

.then(...);

上面代码中，根据函数f的返回结果，加载不同的模块。