浅谈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 相关文章推荐
js判断是否为数组的函数: isArray()
Oct 30 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 Javascript
解决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
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
Node爬取大批量文件的方法示例
2019/06/28 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
django基于restframework的CBV封装详解
2019/08/08 Python
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
亿企通软件测试面试题
2012/04/10 面试题
测试时代收集的软件测试面试题
2013/09/25 面试题
外科实习自我鉴定
2013/10/06 职场文书
商务会议邀请函
2014/01/09 职场文书
实习协议书范本
2014/04/22 职场文书
文秘个人求职信范文
2014/04/22 职场文书
留学推荐信范文
2014/05/10 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
焦裕禄观后感
2015/06/03 职场文书
师范生小学见习总结
2015/06/23 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python