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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
axios学习教程全攻略
Mar 26 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
vue+AI智能机器人回复功能实现
Jul 16 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.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
Php图像处理类代码分享
2012/01/19 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
python pdb调试方法分享
2014/01/21 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
python 多线程重启方法
2019/02/18 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python+OpenCV实现图像拼接
2020/03/05 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
小学英语教学反思案例
2014/02/04 职场文书
小学学校评估方案
2014/06/08 职场文书
六年级学生评语大全
2014/12/26 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
MySQL中order by的执行过程
2022/06/05 MySQL