没错,其实在我们准备打包项目之前,需要考虑的一个问题是:【我们的项目最终是要部署在根目录还是子目录】
如果是部署在 根目录,并不会出现什么问题,因为你的资源文件放在 static
中,然后你在引用的时候,都是 /static/images/a.png
、/static/images/login-bg.jpg
这样的路径来引用(不管是 css
中,还是 template
中),这样是不会有任何问题的。
大家看到我这个项目的访问路径,应该就知道,我这是属于 【子目录】 部署的情况。
那么在 子目录 部署的时候,就有可能出现本文要说的这个问题 【vue 打包后 static 中图片路径不对的问题】所以,本文后续内容的前置条件就是 子目录 部署。
【重点内容开始】
- 首先,你如果要部署在子目录的话,那么,你的
config/index.js
配置中,需要将assetsPublicPath: '/'
改成assetsPublicPath: './'
=> 示例代码 。这一点,应该没什么疑问吧。
然后这个时候,你的代码中,引入 static
中图片的时候,就不能使用 /static/images/a.png
这种绝对路径的形式; (虽然,你在开发环境,使用这种绝对路径的方式仍然没有任何问题,但是你部署后,就会发现,原本应该请求 xxx.com/aaaa/static/...
下面的资源,实际的请求地址是 xxx.com/static/...
就像我文章开头说的那样)。而是要使用相对路径的形式。=> 示例代码 大致如下:
与此同时呢,由于我们在 css 中使用了相对路径来引入图片。那么,打包后,我们的 css 会抽离出来为一个单独的 css 文件,这个时候, css 和 图片 之间的一个相对路径关系就改变了。为了解决这个问题,我们需要在 build/utils.js
中,增加一个 pablicPath
的配置,示例代码 如下:
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: ‘vue-style-loader’,
publicPath: ‘…/…/’ // 作用是设置打包过程中提取css的方法
})
} else {
return [‘vue-style-loader’].concat(loaders)
}
这个时候,就解决了打包后图片路径404的问题了。
我们项目中,不光 style
中会有图片的引用,在 template
中同样会有图片的引用。主要分下面三种情况:
-
style
标签中background-image
(上面示例中已讲解) -
template
中img
标签中src
-
template
中img
标签中v-bind:src
这种情况与 style
标签中 background-image
一样,我们使用相对路径就行了。
这里 也有一个例子:
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
文末
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
-
推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;
-
大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
正掌握。所以对于概念的理解真的很重要。
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-G9T5HH58-1712772257860)]