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文件夹静态资源报错的解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了Vue 实现双向绑定的四种方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧，希望能够给你带来帮助2021-11-11
本文通过实例代码给大家介绍了vue实现个人信息查看和密码修改功能，文中给大家补充介绍了vue实现密码显示隐藏切换功能，非常不错，具有一定的参考借鉴价值，感兴趣的朋友一起看看吧2018-05-05
element-ui 关于获取select 的label值方法
今天小编就为大家分享一篇element-ui 关于获取select 的label值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要给大家介绍了关于vue3中事件总线mitt(第三方库mitt)的相关资料,Mitt是一个在Vue.js应用程序中使用的小型事件总线库,该库允许组件进行通信,而不必过度依赖父级或子级组件之间的props,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Vue-Router-添加全局$router属性,在 Vue 中有一个 mixin 方法，这个方法会在每个组件创建之前被调用，我们可以在这个方法中将 VueRouter 实例挂载到 Vue 实例上，本文给大家介绍的非常详细，需要的朋友可以参考下2023-11-11
关于ElementUI el-table 鼠标滚动失灵的问题及解决办法
这篇文章主要介绍了关于ElementUI el-table 鼠标滚动失灵的问题及解决办法,本文给大家分享问题所在原因及解决方案,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
vite打包去除console.log和debugge的方法实践
本文主要介绍了vite打包去除console.log和debugge的方法实践,vite 已经将这个功能内置了,所以我们只需要修改配置文件,下面就来介绍一下如何修改2023-12-12
下面小编就为大家带来一篇解决Vue编译时写在style中的路径问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Vue组件大全包括（UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例)
本文为大家分享了网上比较流行的Vue组件,包括UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例等开源项目,总有一款适合你2018-10-10
最近项目中使用了minio作为静态资源管理服务,所以简单写一下如何通过minio来上传图片,下面这篇文章主要给大家介绍了关于Vue中通过minio上传文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
最新评论