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 相关文章推荐
JavaScript基本编码模式小结
May 23 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 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
全国中波电台频率表
2020/03/11 无线电
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
python读写文件操作示例程序
2013/12/02 Python
python字典排序实例详解
2015/05/20 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
介绍一下JNDI的基本概念
2013/07/26 面试题
Python如何定义一个函数
2015/09/01 面试题
如何写一份好的自荐信
2014/01/02 职场文书
年度考核自我鉴定
2014/02/02 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
交通安全横幅标语
2014/10/07 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
GO中sync包自由控制并发示例详解
2022/08/05 Golang