请问vue2 import 有没有优雅的写法？

有的，但这不是Vue2提供的，它是webpack提供的功能，所以这个方法适用于使用webpack打包的项目中使用。详情说明文档：https://www.webpackjs.com/gui...

const cache = {}
const pngs =  require.context('@/static/icon/', false, /\.png$/)
pngs.keys().forEach(key=>{
    //key 为文件名，但问题图中.png文件采用的‘_’命名，也有采用’-‘命名文件，所以这里需要把’_‘，‘-’去除统一采用小驼峰命名。转化代码我不写了
    const prop  = //对key进行转化成小驼峰命名
    cache[prop] = pngs[key]
})

export default {
    data(){
        return cache
    }
}

当然这里是批量文件导入，它会将icon文件夹下的所有文件导入；如果个别文件不需要导入，应该把不需要的文件移除，或通过正则过滤掉。代码仅做演示，不能保证一定执行成功，但思想是这样，不清楚可以搜索require.context用法

其他可行方法：使用unimport插件，地址https://github.com/unjs/unimp...它是一个用于自动导入API的插件，它可以通过配置自动导入本地文件，这也是一个方法，但我没有验证，有需要可以自己验证下