一、配置文件的使用
{
"images": {
"logo": "/images/logo.png",
"banner": "/images/banner.jpg",
"icon": "/images/icon.png"
}
}
二、Vue组件中使用配置文件
- 在组件的
<script>部分，引入配置文件：
import imagesConfig from './path/to/images-config.json';
- 在需要使用图片路径的地方，通过配置文件访问路径：
<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');
- 使用配置文件中的图片路径：
<img :src="imagesConfig.logo" alt="Logo">