深入浅析Vue中静态的静态资源路径?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
//路径 assetsRoot:路径。解决(__dirname & # 39; . ./dist # 39;),//静态资源输出到二级目录下 assetsSubDirectory: & # 39;静态# 39;//静态资源cdn地址 assetsPublicPath: & # 39;/& # 39;
引用的时候可直接,不用返回上一级去查找,因为编译输出后的静态下的资源跟html是在同一个目录
& lt; img类=皀avbar-brand-logo"src=https://www.yisu.com/zixun/"静态/logo.png ">
如果单个vue文件里的风格没有用到最好删除掉不然html页面会自动生成一个空的风格
<强> webpack + vuecli打包生成资源相对引用路径与背景图片的正确引用
<强>资源相对引用路径
<强>问题描述
一般情况下,通过webpack + vuecli默认打包的css, js等资源,路径都是绝对的。
但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的静态文件夹当成了根路径,那么要解决这种问题,就得引用相对路径。
<强>解决办法
打开webpack.prod.conf。js
找到输出:增加publicPath: & # 39;。/& # 39;,即可,如图。
那么这样后,资源的引用路径就正确了。
当然在配置文件夹下的指数。js中修改assetsPublicPath: & # 39;。/& # 39;同样也可以达到资源的相对引用。
<强>背景图片的引用问题
上面虽然解决了资源路径的引用问题,但是资源里面的背景图片,不像index . html中加载资源一样,通过。/静态/js/应用程序。js引用可以正常加载,图片资源是通过css加载的,如背景:url(“. ./. ./资产/图片/logo-index.png")不再重演;被相对打包后变成了url(静态/img/logo-index.2f00bf2.png)没有重演所以我们要保留css引用图片的正常路径,即:
url(. ./. ./静态/img/logo-index.2f00bf2.png)没有重演
那么就需要修改构建文件夹下的跑龙套。js代码,如图所示:
添加如图所示的一行代码,这样不论是字体还是图片的引用问题都能解决。
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。
深入浅析Vue中静态的静态资源路径
