图片批量导入

以下是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,
}