浅谈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玩一玩WSH吧
Feb 23 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
p5.js绘制创意自画像
Nov 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与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
php实现的SESSION类
2014/12/02 PHP
表单内同名元素的控制
2006/11/22 Javascript
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
angular.bind使用心得
2015/10/26 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
Python 学习笔记
2008/12/27 Python
Python中的rjust()方法使用详解
2015/05/19 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
实例讲解Python3中abs()函数
2019/02/19 Python
PyTorch基本数据类型(一)
2019/05/22 Python
Python count函数使用方法实例解析
2020/03/23 Python
python线性插值解析
2020/07/05 Python
区分python中的进程与线程
2020/08/13 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
文化产业实施方案
2014/06/07 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
决心书格式及范文
2019/06/24 职场文书
nginx.conf配置文件结构小结
2022/04/08 Servers