浅谈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的prototype属性
Feb 11 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 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用GD库生成高质量的缩略图片
2011/03/09 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
以windows service方式运行Python程序的方法
2015/06/03 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Python生成器generator用法示例
2018/08/10 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
Python collections模块使用方法详解
2019/08/28 Python
python dict如何定义
2020/09/02 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
美国家居装饰店:Pier 1
2019/09/04 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
网络事业创业计划书范文
2014/01/09 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
发展部经理职责规定
2014/02/22 职场文书
岗位职责风险点
2014/03/12 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
学校周年庆活动方案
2014/08/22 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL