vue 项目如 图片路径 配置 文件
时间: 2024-03-16 13:43:14 浏览: 12
在 Vue 项目中,可以通过创建一个配置文件来设置统一的图片路径。具体步骤如下:
1. 在项目 `src` 目录下创建一个 `config` 文件夹。
2. 在 `config` 文件夹中创建一个 `env.js` 文件。
3. 在 `env.js` 文件中添加以下代码:
```
'use strict';
module.exports = {
NODE_ENV: '"production"',
IMG_BASE_URL: '"/your/image/path/"'
};
```
4. 将上面的 `IMG_BASE_URL` 修改为你的图片路径。
5. 在 `vue.config.js` 文件中添加以下代码:
```
const env = require('./config/env');
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? env.IMG_BASE_URL
: '/'
}
```
6. 在模板中使用图片时,使用相对路径,并在路径前加上 `$` 符号。例如:
```
<img :src="`${$IMG_BASE_URL}logo.png`" alt="Logo">
```
这样,就可以在不同的页面中使用相同的图片路径了。注意,这里使用了 Vue 的计算属性,所以需要在组件的 `computed` 中定义 `$IMG_BASE_URL`。定义方式如下:
```
computed: {
$IMG_BASE_URL() {
return process.env.IMG_BASE_URL;
}
}
```
这样,就可以通过 `$IMG_BASE_URL` 访问到你在 `env.js` 中定义的图片路径了。