引言
一、Vue项目文件结构概述
首先，我们需要了解一个标准的Vue项目文件结构。以下是一个典型的Vue项目目录：
vue-project/
├── node_modules/ # 项目依赖模块
├── public/ # 静态资源目录
│ ├── favicon.ico # 网站图标
│ └── index.html # 入口 HTML 文件
├── src/ # 源代码目录
│ ├── assets/ # 静态资源，如图片、样式等
│ │ └── logo.png
│ ├── components/ # 项目组件
│ │ ├── HelloWorld.vue
│ │ └── AnotherComponent.vue
│ ├── views/ # 页面组件
│ │ ├── Home.vue
│ │ ├── About.vue
│ │ └── NotFound.vue
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── store/ # Vuex 状态管理
│ │ ├── index.js
│ │ └── module-example.js
│ ├── App.vue # 根组件
│ └── main.js # 入口文件，启动 Vue 实例
├── env.js # 环境变量配置
├── tests/ # 测试目录
│ ├── unit/ # 单元测试
│ │ └── examples.spec.js
│ └── e2e/ # 端到端测试
│ └── spec.js
├── .gitignore # Git 忽略文件配置
├── babel.config.js # Babel 配置文件
├── package.json # 项目依赖和脚本配置
├── README.md # 项目说明文档
└── vue.config.js # Vue CLI 配置文件
二、图片存放路径选择
1. assets 目录
assets 目录用于存放需要被Webpack处理的静态资源。Webpack会对其进行模块化处理，优化加载速度。
优点：
- 图片路径会被Webpack处理，支持路径别名和模块化导入。
- 可以利用Webpack的loader进行图片压缩、优化等操作。
缺点：
- 打包后的图片路径会发生变化，需要通过Webpack生成的路径来引用。
示例代码：
<img :src="require('@/assets/logo.png')" alt="logo">
import logo from '@/assets/logo.png';
2. static 目录
static 目录用于存放不需要被Webpack处理的静态资源。这些文件在打包后会被直接复制到dist/static目录。
优点：
- 图片路径固定，不会因Webpack打包而改变。
- 适用于一些大文件或需要直接访问的静态资源。
缺点：
- 无法利用Webpack的优化功能。
- 需要使用绝对路径引用。
示例代码：
<img src="/static/logo.png" alt="logo">
三、动态加载图片的最佳实践
方法1：使用import语句导入图片
示例代码：
<img :src="imgSrc" alt="dynamic-image">
import img1 from '@/assets/img1.png';
export default {
data() {
return {
imgSrc: img1
};
}
};
方法2：将图片存放在static目录
示例代码：
<img :src="dynamicSrc" alt="dynamic-image">
export default {
data() {
return {
dynamicSrc: '/static/img1.png'
};
}
};
四、路径别名配置
示例配置：
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@assets': '@/src/assets'
}
}
}
};
使用示例：
import logo from '@assets/logo.png';
五、打包后修改配置文件
步骤：
- 在
static目录下创建config.js文件。 - 定义配置对象，包含所需的路径和数据。
示例代码：
// static/config.js
const Glob = {
BaseUrl: "http://xxx.api.com",
ImgPath: "/static/images/"
};
- 在
index.html中引入config.js。
<script src="/static/config.js"></script>
- 在Vue项目中使用配置对象。
export default {
data() {
return {
imgSrc: Glob.ImgPath + 'img1.png'
};
}
};