vue项目打包部署的话,有时候访问图片会出现不能正常显示的情况,比如:404等,遇到这种情况需要改下配置文件,以下是我自己搜集以及整理的一些步骤,是自己实际项目中解决问题的,在此记录以下。本人小菜鸟一个,如有问题欢迎指正~。
第一:找到build文件夹下的utils.js文件,然后在这个文件中自己加上publicpath:'../../',是为了css和图片正常显示。主要是在这个地方:
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'../../' 记得是自己加上去的
})
} else {
return ['vue-style-loader'].concat(loaders)
}
第二:找到config文件夹下的index.js找到build,记住一定是build,要是改dev没用,因为打包是build命令。然后这个地方改成这样{assetpublicpath:'./'}。
【vue项目打包部署上线,图片 css 等不正常显示的解决方式】改了以上两个地方在重新打包部署,就可以啦~
推荐阅读
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端开发|Vue2.x API 学习
- vue|Vue面试常用详细总结
- vue|电商后台管理系统(vue+python|node.js)
- 腾讯TEG实习|腾讯实习——Vue解决跨域请求
- Vue|vue-router 详解
- vue|vue3替代vuex的框架piniajs实例教程
- Vue|Vue3.0的插槽是如何实现的()
- 前端|面试官(谈谈Vue和React的区别())