浅谈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函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
JS出现失效的情况总结
Jan 20 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 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简单实例介绍文件上传
2015/12/16 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
javascript 写类方式之五
2009/07/05 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
Python Socket编程详细介绍
2017/03/23 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
int在python中的含义以及用法
2019/06/27 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Python中zip函数如何使用
2020/06/04 Python
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
大学生的网络创业计划书
2013/12/26 职场文书
美容院店长岗位职责
2014/04/08 职场文书
根叔历年演讲稿
2014/05/20 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
人生遥控器观后感
2015/06/11 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
Python MNIST手写体识别详解与试练
2021/11/07 Python
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript