在vue-cli打包组件过程中,require一张图片,打包后在dist文件里没有js文件夹,但是图片路径却是js/img。导致404报错。怎么解决
时间: 2023-11-22 07:53:52 浏览: 35
你可以在 webpack 的配置文件中添加一个 rule,用于处理图片的引用。具体操作如下:
1. 安装 file-loader
```
npm install file-loader --save-dev
```
2. 在 webpack 配置文件中添加以下 rule
```js
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'img',
publicPath: 'img'
}
}
]
}
]
}
}
```
3. 在组件中引用图片
```html
<template>
<div>
<img :src="imageSrc">
</div>
</template>
<script>
export default {
data() {
return {
imageSrc: require('./assets/image.png')
}
}
}
</script>
```
以上代码中,`file-loader` 将图片复制到 `dist/img` 目录中,并将图片的公共路径设置为 `img`,因此在组件中引用图片时,需要使用 `require('./assets/image.png')`,而不是直接使用 `./assets/image.png`。这样打包后,图片的路径就会被正确解析为 `img/image.png`。