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 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
Javascript的无new构建实例详解
May 15 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
layui按条件隐藏表格列的实例
Sep 19 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 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生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
Python tkinter实现日期选择器
2021/02/22 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
财务会计专业求职信范文
2013/12/31 职场文书
岗位职责风险防控
2014/02/18 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
六年级情感作文之500字
2019/10/23 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android