vue-cli 打包之后图片引用路径问题
过完五一,感觉整个人跟废了一样,虽然五一期间也没做什么,就是感觉累,感觉困。但无奈今天还有一堆事情等我去做。早上来先发了一版v5.0.1,开启项目新版的第一次!但是毫无疑问,出了很多问题,除了上次打包后js、css路径错误问题(详情请见:https://blog.csdn.net/AmberWu/article/details/79529363),这次出现了图片undefined的问题。...
·
过完五一,感觉整个人跟废了一样,虽然五一期间也没做什么,就是感觉累,感觉困。但无奈今天还有一堆事情等我去做。
早上来先发了一版v5.0.1,开启项目新版的第一次!但是毫无疑问,出了很多问题,除了上次打包后js、css路径错误问题(详情请见:https://blog.csdn.net/AmberWu/article/details/79529363),这次出现了图片undefined的问题。
先来看下报错:
首先看下我项目的dist目录:
按理说,这个img的路径应该是https://xxxxxxxxxxxxxx/dist/static/img/xxx.xxxxxx.png
,但是很明显路径就成了https://xxxxxxxxxxxxxx/static/css/static/img/xxx.xxxxxx.png
,首先应该可以确定是打包的时候出现了什么问题。
其实很简单。打开/build/utils.js
文件,找到这段代码:
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
加上红框内容:publicPath: '../../',
当然这个路径是根据自己项目的实际情况来的
再次npm run build
就可以看效果啦。
更多推荐
已为社区贡献6条内容
所有评论(0)