浅谈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 DOM 元素ID就是全局变量
Sep 20 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
vue 出现data-v-xxx的原因及解决
Aug 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中看实例学正则表达式
2006/12/25 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
wxPython学习之主框架实例
2014/09/28 Python
Python入门篇之字符串
2014/10/17 Python
python threading模块操作多线程介绍
2015/04/08 Python
python 默认参数问题的陷阱
2016/02/29 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
法学专业毕业生自荐信范文
2013/12/18 职场文书
教师党性分析材料
2014/02/04 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
hive数据仓库新增字段方法
2022/06/25 数据库