解决vue项目 build之后资源文件找不到的问题
更新时间：2020年09月12日 09:05:37 作者：我不是郑正好啊
这篇文章主要介绍了解决vue项目 build之后资源文件找不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决静态资源失效的问题
这就需要修改我们的 config 中的 index.js了，默认的build 中的部分是这样的：
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
修改之后的应为这样的:
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
但是这样能确保资源文件可被正常找到, 但页面还是处于白屏状态,
在路由页面找到mode: 'history',
export default new Router({
mode: 'history',
routes: [
将mode: 'history',这句话删除,在进行build,
export default new Router({
// mode: 'history',
routes: [
小伙伴们, 是不是发现好用啦~
补充知识：vue关于build和config文件都已修改，但打包后图片仍找不到的问题
最开始发现有的图片可以加载出来有的却不能，然后去看build和config文件的配置，
都很ok啊。
然后去看那些可以加载出来的跟不能加载的做了对比，发现不能加载出来的都是把路径写在js里面，用变量的方式写进html里面的，最后的解决方式就是：
//以require形式导入图片
url:require('../../static/xxx.png')
然后打包就没问题了；
后面再补充一下，background属性引入图片的话如果以行内元素引入也会造成图片路径找不到的情况，解决的办法就是把它写在style里面，以类名的方式引入；
总结一下，vue里面引用图片在打包后仍能正常使用的正确引用方式：
html内：img src以相对路径引入；
css：style以background属性作为背景图片引入，需以类名方式引入，行内样式可能会不生效；
js：以require('…/url')引入，赋予变量；
以上这篇解决vue项目 build之后资源文件找不到的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了在vue项目中如何获取视频的时长，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue——解决报错 Computed property "****" was assigned to but it ha
这篇文章主要介绍了Vue——解决报错 Computed property "****" was assigned to but it has no setter.的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了vue项目配置sass及引入外部scss文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了解决vue页面渲染但dom没渲染的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器,跟其他富文本编辑器相比,有着丰富的插件,支持多种语言,能够满足日常的业务需求并且免费,本文小编给大家详细介绍了Vue中tinymce富文本功能配置,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue render函数实战之实现tabs选项卡组件的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
sass是css的预处理器,扩展了css语言,提供了规则、变量、混入、选择器、继承、内置函数等特性,有助于减少CSS重复的代码,节省开发时间,下面这篇文章主要给大家介绍了关于vue3安装配置sass的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了详解在vue-test-utils中mock全局对象，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了vue中getters的使用与四个map方法的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
项目中后台返回的时间有多种形式,时间戳、ISO标准时间格式等，我们需要转化展示成能看的懂得时间格式,下面这篇文章主要给大家介绍了关于vue时间格式总结以及转换方法的相关资料,需要的朋友可以参考下2022-12-12
最新评论