webpack/vue-cli 中的 publicPath / 和 ./ 的区别
webpack/vue-cli 中的 publicPath / 和 ./ 的区别
在说这个问题之前,vue-cli 的配置文档已经说的非常清楚了 publicPath
而 webpack 对于 publicPath 的描述相对苍白。但是 vue-cli 对于我们来说也是一个黑盒子,我们只知道 publicPath
可以配置''
,./
或者 /my-app/
这种自定义 URL。但是,你真的理解 webpack 里面的 publicPath
吗?
准备环境
- nginx 模拟一个真实的 URL 和高仿真项目
- webpack 自己写一段 webpack,并且复现对应的场景
(webpack 的配置说复杂也复杂,说简单也简单,如果不想自己从头开始写的,可以从我的一个仓库中直接获取演示代码webpack_config
因为我就是在写这段配置的时候深入研究的 publicPath
PS:如果用我的 webpack 仓库,把代码拉下来后,记得看下是不是在 v0.0.2 分支!
如果对于 nginx 和 webpack 实在太陌生,可以看下后续的描述把~
环境的配置
- nginx.conf nginx 配置不复杂,给他分配一个域名,指向 80 端口,指定入口文件,入口文件下可以直接找到 index.html 即可
server {listen 80;server_name public_path.com;root "E:/Desktop/publicPathDemo/webpack_config/dist";location / {index index.html index.php;autoindex on;if (!-e $request_filename) {rewrite ^(.*)$ /index.php?s=/$1 last;break;}}
}
- 修改 host 文件,添加一个域名
127.0.0.1 public_path.com
- 在准备好的 webpack 项目中,打包一份 dist 文件出来
一切准备就绪,访问 public_path.com
环境准备完毕,开始探究 publicPath
publicPath 使用 ‘/’ 的情况
修改几个地方:
webpack.base.js
- 修改 output.publicPath 为
'/'
。 - 修改
MiniCssExtractPlugin.loader
里面的publicPath
把他注释掉
- 修改 output.publicPath 为
webpack.dev.js
- 修改 output.publicPath 为
'/'
。
- 修改 output.publicPath 为
webpack.prod.js
- 修改 output.publicPath 为
'/'
。
- 修改 output.publicPath 为
然后运行
npm run build
更新一份打包运行
npm run serve
运行一份开发环境的情况。打开浏览器的 http://localhost:8080/
圈重点
index.html
css 中图片的资源
localhost 中 css 的情况
更换项目的 URL
所有的资源,前缀都带上了 /
。没错,这就是 publicPath
的效果。目前我们测试的域名是 http://public_path.com/
那假如有一天,老板让我们改一下 URL,需要访问 http://public_path.com/vue/
才是访问我们当前的页面,你会怎么处理?
熟悉 nginx 的同学应该有答案了,因为域名指向了 /dist/
文件夹,URL 其实和我们资源管理器是一个道理,我们只需要嵌套文件夹,URL 就能一路找下去,所以我们把项目的文件夹调整下
再次访问 http://public_path.com/ 效果如下:
进入 vue 文件夹内
是 nginx 出错了吗?不是的,是资源路径错了。因为在 index.html
中,我们引入的 JS 资源是 /
开头的,意思就是会无视 URL 的层级,直接从最顶级开始找文件,这当然找不到了
publicPath:’/’ 第一个弊端出现了: 就是迁移项目/遇到 URL 复杂的项目的情况下,很容易就找不到资源
publicPath 使用 ‘./’ 或者 ‘’ 的情况
因为
./
和''
在打包完成后对于相对路径来说是一个效果,所以我们用相对清晰的./
做演示
修改几个地方:
webpack.base.js
- 修改 output.publicPath 为
'./'
。 - 修改
MiniCssExtractPlugin.loader
里面的publicPath
把他注释掉
- 修改 output.publicPath 为
webpack.dev.js
- 修改 output.publicPath 为
'./'
。
- 修改 output.publicPath 为
webpack.prod.js
- 修改 output.publicPath 为
'./'
。
- 修改 output.publicPath 为
然后运行
npm run build
更新一份打包 (build 的时候会自动清空dist
目录,然后重新生成文件)运行
npm run serve
运行一份开发环境的情况。打开浏览器的 http://localhost:8080/
老规矩,看几个文件:
index.html
css 文件中的资源
localhost 中的情况
localhost 中 进入 dist 目录看看
为什么 http://public_path.com/ 的图片不显示了
- http://public_path.com/ 项目中,图片没显示,是因为我的 webpack 配置了 css 文件分离,不过我的图片也是分开打包到了
assets/images/
目录下。分离后,图片的引入还是用的相对路径./
可以对比一下使用 img 标签引入的图片和 css 引入的图片的路径差别。可以看出 css 引入的图片中,URL 多了一个css
localhost 为啥打开是文件夹目录了?
和 nginx 原理差不多,原先是指向到 dist 文件夹中的,可是配置 publicPath 后,指向的文件夹往上走了一层,所以就可以看到包括 dist 文件夹在内的目录
localhost 中 进入 dist
这部分的资源和 http://public_path.com/ 解释是一样的了,因为相对路径的问题,所以多了一层 css
是不是使用 ./
就会有那么多问题呢?继续看下更换目录的情况
更换项目的 URL
和之前一样,多加一层 vue 文件夹,访问 http://public_path.com/vue/
没错,比起空白页,这个起码更换目录结构,资源还是都可以请求的。因为使用 ./
和''
访问的都是相对路径,并非绝对路径,只要index.html
和资源文件夹的相对路径没改变,项目随便迁移。
不信可以在迁移一层:
publicPath:’./'弊端: 如果 webpack 配置了样式分离,尤其是 vue 这种 css 和图片都分开文件夹存放的情况下,特别容易出问题
publicPath:’./'好处: 迁移项目的时候,因为用的都是相对路径,所以不管 URL 怎么变化,基本都能找到相应的资源
能不能 publicPath 在’/‘和’./’ 互相取长补短?
可行性在哪里?
上面的大量截图和 demo,可以看出,publicPath:'./'
就差在了 css 打包的时候,因为 css 分离,多了一层文件夹,而图片也分离了,不在 css 文件夹下才导致的。而 publicPath:'/'
呢,刚好都是让资源直接从根目录开始找。
那么我们只需要解决 图片文件和 css 文件夹中的关系,第一个问题就解决了
实际上呢,项目是自己搭建的,css 和图片输出的地方也是我们控制的,我们只需要在处理 css 的图片的时候,处理好publicPth
就行,不过也不能直接用 /
,因为还是迁移项目的那个问题,我们可以考虑使用 ../
图片和 css,就差了一层文件夹嵌套!为啥?因为 css 和图片输出的地方也是我们控制的,细细想想,是不是这么个道理?(针对这个 webpack 是这个道理,不同项目,分别讨论~,原理是一样的)
还有一个就是 publicPath:'./'
在本地开发的时候,打开的都是目录,加 /dist/
访问总觉得的欠妥。
那就用 webpack 的多环境配置,在 dev 环境下还是用 /
保证 localhost 可以正常打开,实际打包的时候在改用 ./
修改配置
webpack.base.js
- 修改 output.publicPath 为
'./'
。(不过这个影响不大了,因为都会被后面的配置覆盖) - 修改
MiniCssExtractPlugin.loader
里面的publicPath
为../
- 修改 output.publicPath 为
webpack.dev.js
- 修改 output.publicPath 为
'/'
。
- 修改 output.publicPath 为
webpack.prod.js
- 修改 output.publicPath 为
'./'
。
- 修改 output.publicPath 为
重新打包,重新运行
url 访问:
localhost 访问:
添加 vue 文件夹在访问:
只能说一句:完美~
另外一种 /my-app/ 的场景
开始的时候 vue-cli 的配置还给出了一种 publicPatch 为 /my-app/
的场景。其实这个场景和我们使用 vue
文件夹的场景特别相似。我们也可以模拟一下。
这种场景什么时候会遇到呢,就是在已经固定的文件夹下再去放项目,比如码云的 gitee pages
。目前我的博客就是运行在码云的 gitee pages
上,码云给我分配的链接是 http://jioho.gitee.io/blog/
,那么这时候我的 publicPath 就需要是 blog
了。
改一下文件:
webpack.base.js
- 修改 output.publicPath 为
'/my-app/'
。(不过这个影响不大了,因为都会被后面的配置覆盖) - 修改
MiniCssExtractPlugin.loader
里面的publicPath
为/my-app/
- 修改 output.publicPath 为
webpack.dev.js
- 修改 output.publicPath 为
'/my-app/'
。
- 修改 output.publicPath 为
webpack.prod.js
- 修改 output.publicPath 为
'/my-app/'
。
- 修改 output.publicPath 为
然后重新运行和重新打包,看下效果:
- index.html 不出所料,就是把 /my-app/加在前面了。所以 css 资源和图片资源也不例外
既然指定了前缀,那使用本地开发的时候也是少不了需要添加 /my-app/
包括我在写自己博客本地预览的时候,vuepress 一样会把blog
帮我带上
像这种情况呢,nginx 可能会做一些反向代理,或者重定向之类的操作倒不是说不会写这部分配置,只是已经超出今天讨论的范围,配置我就不去调试了
像这种平台原先指定好了 /my-app/
前缀让你部署一个项目的话,其实用 './'
+css 资源使用 '../'
的这套方式可以打遍天下~前提是这个 webpack 是你自己搭建的,如果用的还是 vue-cli 或者像我一样在用 vuepress
没有自己去搭自己的 webpack,那就只能把 publicPath 传进去让程序内部处理了~
总结一下
publicPath 的 3 种情况
./ 或者 留空的情况
- 好处:可以部署到任意域名下,因为用的相对路径,只要整个项目迁移,就不会出问题
- 弊端:前提是这套脚手架/webpack 能支持
./
这种情况,如果遇到常见的 css 分离,image 文件夹单独分离的情况,那就得看内部处理了,我想 vue-cli 也是和我的处理方式差不多把,毕竟打包后的资源放哪里,都是 vue-cli 说了算~
/ 的情况
- 好处:不用考虑太多资源性的问题,基本上打包出去后都能从根目录开始查找,webpack 打包后资源多数也是从支持根目录开始找
- 弊端:项目迁移的时候就 GG 了,必须部署在域名,紧跟着 .com/.cn … 后面,不能在多插入任何的路由前缀
自定义 .com 后面的域名
这个谈不上好处和弊端,因为这是平台的限制,无法突破,只能服从
webpack/vue-cli 中的 publicPath / 和 ./ 的区别相关推荐
- 在 vue/cli 中使用 Module Federation
webpack5 的新特性,分模块共同开发.多个独立的构建可以组成一个应用程序,这些独立的构建之间不应该存在依赖关系,因此可以单独开发和部署它们.这通常被称作微前端,但并不仅限于此. 我们分为本地模块 ...
- scss 是什么?在 Vue.cli 中的安装使用步骤是?有哪几大特性?(gxcw)
首先什么是scss呢? scss是一种css预处理语言,是一个css的扩展,它在css语法的基础上,允许使用变量,嵌套规则,混合,导入,继承等功能,使得css更加强大和优雅,而且其完全兼容css3. ...
- Vue Cli 中使用 jQuery
Vue Cli 中使用 jQuery 方式一: 1.安装 jquery npm install jquery 2.在想要使用 jQuery 的文件里面引入即可: import $ from 'jque ...
- Leaflet笔记-把leaflet-tilelayer-wmts移植到vue cli中(含思路)
目录 前言 过程 前言 关于leaflet的webpackage使用npm安装官方是有明显的解析 但是关于插件特别是TileLayer.WMTS是不提供的,但提供了源码,可以稍微修改下,就能在vue ...
- 前端笔记-vue cli中axios批量发送get和post请求及注意事项
目录 基本概念 关键代码 基本概念 这里安装好axios后,还要安装qs npm install --save qs 在vue cli中在created里面调用方法,他会在页面加载完成后自动调用! 批 ...
- Web前端笔记-js中加载图片文件(vue cli中同样适用)
这里主要是在vue cli项目中加载图片的时候会出现304,特别是使用自己写的js加载图片的时候,此博文记录了解决办法. 在js文件中引用文件 import img from '@/assets/im ...
- 前端笔记-vue cli中使用router-link进行路由跳转
目录 以前的方法 新方法 以前的方法 以前是通过router的push进行跳转,代码如下: <template><div class="XXXXXXXXXXXXXXXXX& ...
- 前端笔记-Vue cli中使用axios后JavaScript变量传输给vue变量要注意的地方
目录 axios.all中的注意事项 为什么要采用全局的JavaScript变量给vue变量 axios.all中的注意事项 如下的请求: methods:{getData(){axios.all([ ...
- 前端笔记-vue cli中使用echarts画江苏省地图
目录 基本概念 代码与实例 基本概念 这里使用echarts,框架用vue cli,下面这个链接是vue cli导入echarts https://blog.csdn.net/qq78442761/a ...
最新文章
- 【MATLAB】数据分析之求函数的极限(limit)
- c语言结果用全局变量返回,c语言参数传递和返回值及变量存储.doc
- 当我们在聊 Serverless 时你应该知道这些
- 白话Elasticsearch23-深度探秘搜索技术之通过ngram分词机制实现index-time搜索推荐
- 余弦函数导数推导过程_对三角函数深入理解以及换元法的应用
- sourceTree对git的新建项目、储藏代码、切换分支、回滚代码、提交代码
- Top 10 盘点:2019 Java 开发者必学的测试框架、工具和库!
- FFmpeg编写的代码
- CSS之position解释
- 一元函数拐点与驻点的区别
- Lisp真的是屠龙之技吗?
- u盘linux 修复grub,Ubuntu 18.04与Win10双系统U盘安装后的GRUB2修复
- Qt5开发的验厂考勤工资系统-计时计件综合版
- shader02-仿星空粒子
- VMware 笔试题目:猫和老鼠玩象棋
- 微信蓝牙设备开发教程之获取蓝牙设备deviceid和设备二维码(2)
- 【Ubuntu】如何在Ubuntu系统上设置好看的动态壁纸(Komorebi)
- C语言知识-零零散散(四)
- MYSQL的删除和重装
- C语言:单链表的循环添加、插入操作,直到不在插入为止