vue-cli3访问public文件夹静态资源报错的解决方式
更新时间：2020年09月02日 14:25:14 作者：明月松江
这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
今天在项目中使用了public文件夹里的静态资源，在本地测试没有发现问题，但是项目部署到fat服务器却报了404错误。
我发现原因在于我的项目没有部署在域名的根部，而我引用public文件是通过绝对路径方式引用的，因为就出现了路径错误。
路径如下：
<img :src="`/image1.png`">
在官网文档中发现这种情况需要为 URL 配置 publicPath 前缀：process.env.BASE_URL
正确的引用路径是：
<img :src="`${process.env.BASE_URL}image1.png`">
当然，最好避免将文件放在public文件夹，因为任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。
补充知识：@vue/cli 3 打包文件读取绝对路径处理
@vue/cli 3 封装了 webpack.config.js，一般都在 vue.config.js 里面配置，官网不推荐在 webpack 的 output 处理，这里踩了一下坑，希望可以帮到后面遇到的小伙伴。
vue.config.js
module.exports = {
// 这里是配置上线读取当前目录，默认是根路径，如 /js, /css 等，具体根据项目来
baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
// others
}
以上这篇vue-cli3访问public文件夹静态资源报错的解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
Vite是一款非常轻量级的Web开发框架，它可以帮助开发者快速搭建一个开发环境。Vite搭建的开发环境可以提供更快的编译速度，更少的配置，更好的性能和更多的开发者友好性，使开发者可以更快地构建出功能强大的Web应用程序。2023-02-02
最近小编接了一个新项目，项目需求要实现一个聊天功能，今天小编通过实例代码给大家介绍vue cli使用融云实现聊天功能的方法，感兴趣的朋友跟随小编一起看看吧2019-04-04
elementUI中input回车触发页面刷新问题与解决方法
这篇文章主要给大家介绍了关于elementUI中input回车触发页面刷新问题与解决方法,文中通过实例代码介绍的非常详细,对大家学习或者使用elementUI具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
在vue3版本中，引入了一个新的函数，叫做setup，引入他的原因总结一下主要原因是：为了使用组合式 API，setup函数是Composition 的入口。本文将详细介绍一下Vue3中setup函数的使用教程，感兴趣的可以了解一下2022-07-07
这篇文章主要介绍了解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了浅谈Vue使用Cascader级联选择器数据回显中的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
vue mounted周期中document.querySelectorAll()获取不到元素的解决
这篇文章主要介绍了vue mounted周期中document.querySelectorAll()获取不到元素的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Props传参v-for后TS报错对象类型是unknow的解决方案
这篇文章主要介绍了Props传参v-for后TS报错对象类型是unknow的解决方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
这篇文章主要介绍了vue开发中关于axios的封装过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vue如何获取new Date().getTime()时间戳
在Web开发中,前端使用Vue.js获取的是毫秒级时间戳,而PHP后端则是秒级时间戳,处理此类问题时,需要将PHP的时间戳乘以1000转换为毫秒级,以保证数据的一致性和正确的逻辑判断2024-10-10
最新评论