vue data使用外部其他js文件（使用其他数据大量图片）

原创于 2019-12-04 10:38:21 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#外部js数据 #其他js文件

vue笔记专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种在Vue项目中将大量本地图片资源集中管理的方法，通过创建单独的js文件来存放图片资源，利用require语法动态导入，再通过data()函数返回，最后在Vue组件中引用该js文件实现图片的展示。

1.js文件 img.js

js文件里都是本地图片资源（本地图片导入方法）

export default {
  data () {
    return {
      imgUrl: require('@/pages/MSite/image/1.jpg')
    }
  }
}

2.vue使用

<template>
  <img :src="imgUrl">
</template>
<script>
import img from 'common/js/img.js'
export default {
  data() {
    return {
      ...img.data()
    }
  }
}  
</script>

这样大量本地图片就可以直接放置在一个js文件里面，而不是全写在vue文件里面。