欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack/vue-cli 中的 publicPath / 和 ./ 的区别

程序员文章站 2022-07-14 09:18:35
...

webpack/vue-cli 中的 publicPath / 和 ./ 的区别

在说这个问题之前,vue-cli 的配置文档已经说的非常清楚了 publicPath

webpack/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 文件出来

webpack/vue-cli 中的 publicPath / 和 ./ 的区别

一切准备就绪,访问 public_path.com

webpack/vue-cli 中的 publicPath / 和 ./ 的区别

环境准备完毕,开始探究 publicPath

publicPath 使用 ‘/’ 的情况

修改几个地方:

  • webpack.base.js

    • 修改 output.publicPath 为 '/'
    • 修改 MiniCssExtractPlugin.loader 里面的 publicPath 把他注释掉
  • webpack.dev.js

    • 修改 output.publicPath 为 '/'
  • webpack.prod.js

    • 修改 output.publicPath 为 '/'
  • 然后运行 npm run build 更新一份打包

  • 运行 npm run serve 运行一份开发环境的情况。打开浏览器的 http://localhost:8080/

圈重点

index.html
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

css 中图片的资源
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

localhost 中 css 的情况
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

更换项目的 URL

所有的资源,前缀都带上了 /。没错,这就是 publicPath 的效果。目前我们测试的域名是 http://public_path.com/ 那假如有一天,老板让我们改一下 URL,需要访问 http://public_path.com/vue/ 才是访问我们当前的页面,你会怎么处理?

熟悉 nginx 的同学应该有答案了,因为域名指向了 /dist/ 文件夹,URL 其实和我们资源管理器是一个道理,我们只需要嵌套文件夹,URL 就能一路找下去,所以我们把项目的文件夹调整下

webpack/vue-cli 中的 publicPath / 和 ./ 的区别

再次访问 http://public_path.com/ 效果如下:
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

进入 vue 文件夹内
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

是 nginx 出错了吗?不是的,是资源路径错了。因为在 index.html 中,我们引入的 JS 资源是 / 开头的,意思就是会无视 URL 的层级,直接从最*开始找文件,这当然找不到了
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

publicPath:’/’ 第一个弊端出现了: 就是迁移项目/遇到 URL 复杂的项目的情况下,很容易就找不到资源

publicPath 使用 ‘./’ 或者 ‘’ 的情况

因为 ./'' 在打包完成后对于相对路径来说是一个效果,所以我们用相对清晰的./做演示

修改几个地方:

  • webpack.base.js

    • 修改 output.publicPath 为 './'
    • 修改 MiniCssExtractPlugin.loader 里面的 publicPath 把他注释掉
  • webpack.dev.js

    • 修改 output.publicPath 为 './'
  • webpack.prod.js

    • 修改 output.publicPath 为 './'
  • 然后运行 npm run build 更新一份打包 (build 的时候会自动清空dist目录,然后重新生成文件)

  • 运行 npm run serve 运行一份开发环境的情况。打开浏览器的 http://localhost:8080/

老规矩,看几个文件:

index.html
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

css 文件中的资源
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

localhost 中的情况
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

localhost 中 进入 dist 目录看看
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

为什么 http://public_path.com/ 的图片不显示了

  • http://public_path.com/ 项目中,图片没显示,是因为我的 webpack 配置了 css 文件分离,不过我的图片也是分开打包到了assets/images/ 目录下。分离后,图片的引入还是用的相对路径 ./

webpack/vue-cli 中的 publicPath / 和 ./ 的区别

可以对比一下使用 img 标签引入的图片和 css 引入的图片的路径差别。可以看出 css 引入的图片中,URL 多了一个css
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

localhost 为啥打开是文件夹目录了?

和 nginx 原理差不多,原先是指向到 dist 文件夹中的,可是配置 publicPath 后,指向的文件夹往上走了一层,所以就可以看到包括 dist 文件夹在内的目录

localhost 中 进入 dist

这部分的资源和 http://public_path.com/ 解释是一样的了,因为相对路径的问题,所以多了一层 css

是不是使用 ./ 就会有那么多问题呢?继续看下更换目录的情况

更换项目的 URL

和之前一样,多加一层 vue 文件夹,访问 http://public_path.com/vue/

webpack/vue-cli 中的 publicPath / 和 ./ 的区别

webpack/vue-cli 中的 publicPath / 和 ./ 的区别

没错,比起空白页,这个起码更换目录结构,资源还是都可以请求的。因为使用 ./'' 访问的都是相对路径,并非绝对路径,只要index.html和资源文件夹的相对路径没改变,项目随便迁移。

不信可以在迁移一层:

webpack/vue-cli 中的 publicPath / 和 ./ 的区别
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

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../
  • webpack.dev.js
    • 修改 output.publicPath 为 '/'
  • webpack.prod.js
    • 修改 output.publicPath 为 './'

重新打包,重新运行

url 访问:
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

localhost 访问:
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

添加 vue 文件夹在访问:
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

只能说一句:完美~

另外一种 /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/
  • webpack.dev.js
    • 修改 output.publicPath 为 '/my-app/'
  • webpack.prod.js
    • 修改 output.publicPath 为 '/my-app/'

然后重新运行和重新打包,看下效果:

  • index.html 不出所料,就是把 /my-app/加在前面了。所以 css 资源和图片资源也不例外

webpack/vue-cli 中的 publicPath / 和 ./ 的区别

既然指定了前缀,那使用本地开发的时候也是少不了需要添加 /my-app/
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

包括我在写自己博客本地预览的时候,vuepress 一样会把blog帮我带上
webpack/vue-cli 中的 publicPath / 和 ./ 的区别

像这种情况呢,nginx 可能会做一些反向代理,或者重定向之类的操作倒不是说不会写这部分配置,只是已经超出今天讨论的范围,配置我就不去调试了

像这种平台原先指定好了 /my-app/ 前缀让你部署一个项目的话,其实用 './'+css 资源使用 '../' 的这套方式可以打遍天下~前提是这个 webpack 是你自己搭建的,如果用的还是 vue-cli 或者像我一样在用 vuepress 没有自己去搭自己的 webpack,那就只能把 publicPath 传进去让程序内部处理了~

总结一下

publicPath 的 3 种情况

./ 或者 留空的情况

  • 好处:可以部署到任意域名下,因为用的相对路径,只要整个项目迁移,就不会出问题
  • 弊端:前提是这套脚手架/webpack 能支持 ./ 这种情况,如果遇到常见的 css 分离,image 文件夹单独分离的情况,那就得看内部处理了,我想 vue-cli 也是和我的处理方式差不多把,毕竟打包后的资源放哪里,都是 vue-cli 说了算~

/ 的情况

  • 好处:不用考虑太多资源性的问题,基本上打包出去后都能从根目录开始查找,webpack 打包后资源多数也是从支持根目录开始找
  • 弊端:项目迁移的时候就 GG 了,必须部署在域名,紧跟着 .com/.cn … 后面,不能在多插入任何的路由前缀

自定义 .com 后面的域名

这个谈不上好处和弊端,因为这是平台的限制,无法突破,只能服从 ????

我的原文博客地址,点一下提高一下SEO收录,感谢感谢~ webpack/vue-cli 中的 publicPath / 和 ./ 的区别