VUE开发——静态文件管理（以图片Images管理为例）

前言

对于应用开发过程中的静态文件（eg：Images，Files，…）的路径管理我认为是比较头疼的是，有没有一种比较好的方法去管理这些乱七八糟的东西呢？答案是有的，不仅在VUE的开发中用到，在平时的REACT和RN开发中我也会用到。使用静态文件管理有如下好处：

• 这样更加利于我们将心思花在程序设计和编码上
• 代码更加的简洁
• 更加利于后期的更新和维护
• 强迫症福利

一、创建

1、确定静态文件路径：

2、新建 Images.js ,个人习惯放在 /src/router/ 下面：

3、编写 Image.js 文件，requier 引入涂脸路径、export 暴露 Json 对象：

const Images = {
  logo: require('../assets/logo.png')
}
export default Images

4、main.js 里面全局引入 scr/router/Images.js：

注：Vue.prototype.$Images 其中的 $Images 是全局暴露的对象名，你也可以用其他的，例如：images、pics 等等。

二、使用

只要在使用的地方获取 $Images 对应图片的 key 就行了：
这样：

或者这样：

---