浅谈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无缝滚动代码
Jan 03 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
简述JS控制台的使用
Jul 15 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 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递归的三种常用方式
2019/02/28 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
python批量下载抖音视频
2019/06/17 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python中count函数知识点浅析
2020/12/17 Python
python脚本定时发送邮件
2020/12/22 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
高一学生评语大全
2014/04/25 职场文书
签约仪式致辞
2015/07/30 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
MYSQL 表的全面总结
2021/11/11 MySQL
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫