以下是js文件里 import，export的时候简化加载文件的方法。
import过来的对象，当做一个目录来使用。根据文件名称调取该目录的文件
优化前的代码
假设有这种代码。 我要是新增图片的时候总是要去改 main_icon.js文件的内容，非常的麻烦
// main_icon.js
import blank from '@/assets/image/icon/main/blank.png';
import news from '@/assets/image/icon/main/news.png';
import mail from '@/assets/image/icon/main/mail.png';
export default {
blank
,news
,mail
}
// nav_icon.js
import MainIcon from "./_main_icon.js";
const _items = {
'news': {
url: '/oa/news',
main_page_icon:MainIcon.news,
title: '院内新闻'
},
'mail': {
url: '/mail',
main_page_icon:MainIcon.mail,
title: '邮箱'
},
}
export default {
_items,
}
优化后的代码
改成这样的话就不用每次修改 main_icon.js文件的内容了
// main_icon.js
const images = require.context("@/assets/image/icon/main/", false, /\.png$/);
function getImage(imageName) {
return images(`./${imageName}.png`);
}
export default {
Get: getImage,
};
// nav_icon.js
import MainIcons from "./_main_icon.js";
const MainIcon = MainIcons.Get
const _items = {
'news': {
url: '/oa/news',
main_page_icon:MainIcon('news'),
title: '院内新闻'
},
'mail': {
url: '/mail',
main_page_icon:MainIcon('mail'),
title: '邮箱'
},
}
export default {
_items,
}
