浅谈Vue static 静态资源路径 和 style问题


Posted in Javascript onNovember 07, 2020

我就废话不多说了,大家还是直接看代码吧~

// Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 // 静态资源输出到二级目录下
 assetsSubDirectory: 'static',
 // 静态资源cdn地址
 assetsPublicPath: '/',

引用的时候可直接,不用返回上一级去查找,因为编译输出后的 static 下的资源 跟 html 是在同一个目录

<img class="navbar-brand-logo" src="static/logo.png"></a>

如果单个vue文件里的 style 没有用到 最好删除掉 不然 html页面会自动生成一个 空的style

补充知识:webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

资源相对引用路径

问题描述

一般情况下,通过webpack+vuecli默认打包的css、js等资源,路径都是绝对的。

浅谈Vue static 静态资源路径 和 style问题

但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径。

解决办法

打开webpack.prod.conf.js

找到output:增加 publicPath: './', 即可,如图。

浅谈Vue static 静态资源路径 和 style问题

那么这样后,资源的引用路径就正确了。

当然在config文件夹下的index.js中修改 assetsPublicPath: './'同样也可以达到资源的相对引用。

背景图片的引用问题

上面虽然解决了资源路径的引用问题,但是资源里面的背景图片,不像index.html中加载资源一样,通过./static/js/app.js引用可以正常加载,图片资源是通过css加载的,如 background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2f00bf2.png) no-repeat所以我们要保留css引用图片的正常路径,即:

url(../../static/img/logo-index.2f00bf2.png) no-repeat

那么就需要修改build文件夹下的utils.js代码,如图所示:

浅谈Vue static 静态资源路径 和 style问题

添加如图所示的一行代码,这样不论是字体还是图片的引用问题都能解决。

以上这篇浅谈Vue static 静态资源路径 和 style问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
javascript中this用法实例详解
Apr 06 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 #Javascript
Nuxt 项目性能优化调研分析
Nov 07 #Javascript
js实现日历
Nov 07 #Javascript
工作中常用js功能汇总
Nov 07 #Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 #Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 #Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 #Javascript
You might like
利用js调用后台php进行数据处理原码
2006/10/09 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
zooplus波兰:在线宠物店
2019/07/21 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
客服服务心得体会
2013/12/30 职场文书
消防安全汇报材料
2014/02/08 职场文书
六查六看剖析材料
2014/02/15 职场文书
心理健康日活动总结
2014/05/08 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书