Vue项目轻松搞定图片路径动态配置：告别硬编码，实现灵活切换

一、配置文件的使用

{
  "images": {
    "logo": "/images/logo.png",
    "banner": "/images/banner.jpg",
    "icon": "/images/icon.png"
  }
}

二、Vue组件中使用配置文件

1. 在组件的<script>部分，引入配置文件：

import imagesConfig from './path/to/images-config.json';

1. 在需要使用图片路径的地方，通过配置文件访问路径：

<img :src="imagesConfig.logo" alt="Logo">

三、动态切换图片路径

创建多个配置文件，如images-dev.json、images-test.json和images-prod.json，分别对应不同的环境。

在Vue组件中，根据当前环境动态引入相应的配置文件：

import { process } from 'env-utils'; // 假设有一个env-utils工具来获取当前环境

const imagesConfig = require(process.env.NODE_ENV === 'development' ? './path/to/images-dev.json' : 
                           process.env.NODE_ENV === 'test' ? './path/to/images-test.json' : 
                           './path/to/images-prod.json');

1. 使用配置文件中的图片路径：

<img :src="imagesConfig.logo" alt="Logo">

四、总结