vue-cli3访问public文件夹静态资源报错的解决方式


Posted in Javascript onSeptember 02, 2020

今天在项目中使用了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文件夹静态资源报错的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 分页全选或反选标识实现代码
Aug 09 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 #Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 #Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 #Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 #Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 #Javascript
JavaScript this关键字指向常用情况解析
Sep 02 #Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 #Javascript
You might like
深入php中var_dump方法的使用详解
2013/06/24 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
php组合排序简单实现方法
2016/10/15 PHP
php正则修正符用法实例详解
2016/12/29 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
详解Node 定时器
2018/02/26 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
python 判断自定义对象类型
2009/03/21 Python
python循环监控远程端口的方法
2015/03/14 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
python3 map函数和filter函数详解
2019/08/26 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
应届行政管理专业个人自我评价
2013/12/28 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
供货协议书范本
2014/04/22 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书