浅谈Vue static 静态资源路径 和 style问题
我就废话不多说了，大家还是直接看代码吧~
// 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等资源，路径都是绝对的。
但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。
解决办法
打开webpack.prod.conf.js
找到output：增加 publicPath: './', 即可，如图。
那么这样后，资源的引用路径就正确了。
当然在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 props用法详解(小结),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
在项目中经常有需要将列表的高度设置成剩余可视区域的高度,本文主要来和大家介绍一下如何通过指令和css变量的方式快速设置列表高度,希望对大家有所帮助2024-03-03
这篇文章主要介绍了关于vue中路由的跳转和参数传递，参数获取方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要给大家介绍了基于Vue+Echart的动态图绘制,用户需要展示他的数据库是有哪个数据库转化的,需要展示数据库的轨迹图,前导库的关系图,文中有详细的实现代码,需要的朋友可以参考下2023-10-10
基于element-ui对话框el-dialog初始化的校验问题解决
这篇文章主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue.js实现插入数值与表达式的方法,结合实例形式分析了vue.js常见的3种插入数值实现方式,并总结了vue.js插值与表达式相关使用技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了Vue封装Axios请求和拦截器的步骤，帮助大家更好的对axios进行封装并将接口统一管理，同时为请求和响应设置拦截器interceptors。，感兴趣的朋友可以了解下2020-09-09
这篇文章主要介绍了Vue-extend和VueComponent问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
前端element-ui两层dialog嵌套遮罩层消失的问题解决办法
最近使用vue+elementUI做项目,使用过程中很多地方会用到dialog这个组件,有好几个地方用到了dialog的嵌套,这篇文章主要给大家介绍了关于前端element-ui两层dialog嵌套遮罩层消失的问题解决办法,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了浅谈vue权限管理实现及流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
最新评论