最近在使用cli3创建项目的时候,img图片运行之后i属性src="[object Module]",无法直接显示出来了。
网上找了一圈,应该是file-loader的问题,在此记录下解决问题的方法。
因为使用的是cli3的创建方式,所以会在
packjson.json
同级文件夹内创建
vue.config.js
配置文件
文件内容如下:
module.exports = {
chainWebpack: config => {
const imagesRule = config.module.rule('images')
imagesRule.uses.clear()
// 删除images的rule
imagesRule.use('file-loader')
.loader('url-loader')
.options({
limit: 10000,
// 设置图片大小
fallback: {
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]'