大白话Vue之publicPath

最新推荐文章于 2024-05-27 23:13:20 发布
最新推荐文章于 2024-05-27 23:13:20 发布
阅读量1w 收藏 19
点赞数 6
文章标签： vue.js javascript webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_35007727/article/details/125024156
版权

1、下看一下publicPath字段出现的位置

vue.config.js

 webpack.config.js

2、官网中的解释(可以忽略)

3、用人话解释publicPath


场景说明：

  • 每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录
  • 部署的时候，是部署在服务器的一个/test文件夹下
  • 打包后的文件目录结构

一、不设置publicPath时，部署后请求路径：

http://111.222.333.444:8888/css/app.0b79487b.css

1

2

3

4

5

// vue.config.js

module.exports = {

  // publicPath: '',

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html lang=en>

<head>

  <title>test</title>

  <link href=/css/app.0b79487b.css rel=preload as=style>

  <link href=/js/app.ba2d9b8a.js rel=preload as=script>

  <link href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>

  <link href=/css/app.0b79487b.css rel=stylesheet>

</head>

<body>

<div id=app></div>

<script src=/js/chunk-vendors.e7ac9ff2.js></script>

<script src=/js/app.ba2d9b8a.js></script>

</body>

</html>

二、设置为/时，部署后请求路径：

http://111.222.333.444:8888/css/app.0b79487b.css

1

2

3

4

5

// vue.config.js

module.exports = {

  publicPath: '/',

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html lang=en>

<head>

  <title>test</title>

  <link href=/css/app.0b79487b.css rel=preload as=style>

  <link href=/js/app.ba2d9b8a.js rel=preload as=script>

  <link href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>

  <link href=/css/app.0b79487b.css rel=stylesheet>

</head>

<body>

<div id=app></div>

<script src=/js/chunk-vendors.e7ac9ff2.js></script>

<script src=/js/app.ba2d9b8a.js></script>

</body>

</html>

三、设置为./时，部署后请求路径：

http://111.222.333.444:8888/test/css/app.0b79487b.css

1

2

3

4

5

// vue.config.js

module.exports = {

  publicPath: './',

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html lang=en>

<head>

  <title>test</title>

  <link href=css/app.0b79487b.css rel=preload as=style>

  <link href=js/app.8569d42d.js rel=preload as=script>

  <link href=js/chunk-vendors.e7ac9ff2.js rel=preload as=script>

  <link href=css/app.0b79487b.css rel=stylesheet>

</head>

<body>

<div id=app></div>

<script src=js/chunk-vendors.e7ac9ff2.js></script>

<script src=js/app.8569d42d.js></script>

</body>

</html>

四、设置为static时，部署后请求路径：

http://111.222.333.444:8888/test/static/css/app.0b79487b.css

1

2

3

4

5

// vue.config.js

module.exports = {

  publicPath: 'static',

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html lang=en>

<head>

  <title>test</title>

  <link href=static/css/app.0b79487b.css rel=preload as=style>

  <link href=static/js/app.d0717808.js rel=preload as=script>

  <link href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>

  <link href=static/css/app.0b79487b.css rel=stylesheet>

</head>

<body>

<div id=app></div>

<script src=static/js/chunk-vendors.e7ac9ff2.js></script>

<script src=static/js/app.d0717808.js></script>

</body>

</html>

五、设置为./static时，部署后请求路径：

http://111.222.333.444:8888/test/static/css/app.0b79487b.css

1

2

3

4

5

// vue.config.js

module.exports = {

  publicPath: './static',

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html lang=en>

<head>

  <title>test</title>

  <link href=static/css/app.0b79487b.css rel=preload as=style>

  <link href=static/js/app.d0717808.js rel=preload as=script>

  <link href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>

  <link href=static/css/app.0b79487b.css rel=stylesheet>

</head>

<body>

<div id=app></div>

<script src=static/js/chunk-vendors.e7ac9ff2.js></script>

<script src=static/js/app.d0717808.js></script>

</body>

</html>

六、设置为../static时，部署后请求路径：

http://111.222.333.444:8888/static/css/app.0b79487b.css

1

2

3

4

5

// vue.config.js

module.exports = {

  publicPath: '../static',

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html lang=en>

<head>

  <title>test</title>

  <link href=../static/css/app.0b79487b.css rel=preload as=style>

  <link href=../static/js/app.695b7ccc.js rel=preload as=script>

  <link href=../static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>

  <link href=../static/css/app.0b79487b.css rel=stylesheet>

</head>

<body>

<div id=app></div>

<script src=../static/js/chunk-vendors.e7ac9ff2.js></script>

<script src=../static/js/app.695b7ccc.js></script>

</body>

</html>

七、设置为../时，部署后请求路径：

http://111.222.333.444:8888/css/app.0b79487b.css

1

2

3

4

5

// vue.config.js

module.exports = {

  publicPath: '../',

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html lang=en>

<head>

  <title>test</title>

  <link href=../css/app.0b79487b.css rel=preload as=style>

  <link href=../js/app.67ace555.js rel=preload as=script>

  <link href=../js/chunk-vendors.e7ac9ff2.js rel=preload as=script>

  <link href=../css/app.0b79487b.css rel=stylesheet>

</head>

<body>

<div id=app></div>

<script src=../js/chunk-vendors.e7ac9ff2.js></script>

<script src=../js/app.67ace555.js></script>

</body>

</html>

 

---_._---
关注
  • 6
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
大白话讲解JavaScript的Promise
10-20
JavaScript的Promise对象是ES6（ECMAScript 2015）规范中引入的一种用于处理异步操作的方案。Promise代表了某个未来才会结束的事件（通常是一个异步操作），并且允许我们为这个事件的完成指定回调函数。...
Vue.config文件里边的publicPath的配置使用
2201_75705263的博客
03-05 5295
如果你的项目里面的静态文件都放在public文件中，那么使用的时候要使用publicPath这个变量，防止打包后静态文件找不到；你需要通过绝对路径来引用它们。因为：任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack；相当于打包过后的路径上多一个文件夹的名字。
Vue CLI 设置 publicPath：打包后的应用可部署在任意路径
前端技术
12-21 4579
Vue CLI 设置 publicPath：打包后的应用可部署在任意路径
vue2的打包事项（publicPath路径），部署在域名子路径上
insist_life的博客
06-18 4815
/ 例如 https://www.ruoyi.vip/。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions。// http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件。$/i, // 压缩文件格式。
vue - vue的配置文件vue.config.js介绍
qq_43886365的博客
09-30 5125
vue项目中的配置文件vue.config.js介绍
vue打包时的publicPath，就是打包后静态资源的路径
坚持原创
03-02 1万+
情况一 当不配置vue.config.js或者没有publicPath属性时，默认访问的静态路径是服务器的根目录 服务器根目录下没有js文件夹所以访问失败，把dist下的js,css等静态文件剪切到wamp/www目录下就可以正常访问了（注意重启wamp） 情况二 当配置为当前目录’./’ 访问正常，其实publicPath当前目录即打包后的index.html的当前目录，即dist目录，怎么证明，把publicPath的值设置为’…/’，看看情况三 情况三 又报错，把js,css等静态.
大白话领域驱动设计DDD视频教程
01-21
视频详细讲解，需要的小伙伴自行网盘下载，链接见附件，永久有效。 第1章 初步了解DDD 课程介绍 抛开杂念，看看传统三层CRUD编程方式 DDD领域驱动设计到底是什么？ DDD和传统三层优劣势比较 DDD在国内现象是个什么...
大白话SVM算法课程
06-15
01_SVM之回顾梯度下降原理02_SVM之回顾有约束的最优化问题03_SVM之回顾有约束的最优化问题-KKT几何解释04_SVM之回顾有约束的最优化问题-KKT数学解释05_SVM之回顾距离公式和感知器模型06_SVM之感知器到SVM的引入07_...
大白话领域驱动设计视频教程
09-25
给大家分享一套课程——大白话领域驱动设计视频教程
vue脚手架增加自动打入环境变量publicPath、baseUrl等功能
Stride的博客
10-19 350
，减少了很多重复的工作量，特别对于ui定义化的统一样式，通过外部变量修改的方式已经远远达不到ui的效果，我基于源码（增加内置变量、修改内置变量、直接修改组件内部样式等方式）去维护了一些统一化的样式（基于默认大小）排除文件xx.zip、xx，例如项目叫web-admin，以上变量都是admin，我就在想每次创建项目去改这些实在太麻烦了，有没有更方便的方式。中就是文件映射和打包后文件赋值给了环境变量，baseUrl也是同理不重复举例了，别忘了404界面如果写了返回，开发环境返回的也应该是。
vue3 中的publicPath配置，history模式路由配置，index.html中引入public的静态资源
SmallGirlYang的博客
03-11 1万+
vue3打包时遇到的问题 1、publicPath 配置 在vue3中没有了baseUrl，在打包时如果想要设置一个根路径，需要设置在publicPath中 // 例如 https://127.0.0.1/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。 // 例如，如果你的应用被部署在 https://127.0.0.1/admin/，则设置 baseUrl 为 /admin/。 publicPath: process.env.NODE_ENV === "production" ? "/
将前端vue项目部署到nginx中，vue中publicPath自动拼接一个路径
cjy1575944940的博客
08-22 4304
将原本部署在tomcat中的vue项目改成部署在nginx中。强调了vue.config.js里的publicPath对nginx配置的影响，修改访问路径后vue配置以及nginx配置都需要修改
nginx部署vue项目,给访问路径加前缀的方法：vue.config.js配置publicPath和nginx配置alias
字节叔叔
04-18 8297
本文主要涉及到 Vue.js 项目部署在 Nginx 上的相关问题。其中，publicPath 选项可以用于设置 Vue.js 项目的访问路径前缀，alias 指令可以用于 Nginx 中将请求路径映射到指定的文件系统路径。同时，通过设置 Nginx 配置文件，可以将多个 Vue.js 项目部署在同一个域名下的不同路径中。使用 alias 指令可以更加方便地管理多个 Vue.js 项目，并使配置文件更加简洁易读。
vue-router的base和vue.config.js的publicPath区别和联系
热门推荐
atu1111的博客
11-17 1万+
vue-router的base和vue.config.js的publicPath区别和联系   vue-router的base官方文档解释： base 类型: string 默认值: "/" 应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"   vue.config.js的publicPath官方文档解释： 1.只设置vue-router的base配置   配置路由基准路径为app,vue.config.js配置文件的publicPath为相对路径
前端 JS 经典：vue 开发中的 base 和 publicPath
最新发布
weixin_64684095的博客
05-27 2940
不知各位小伙伴有没有遇到过这样的问题，就是本地开发的好好的，结果打包后自信满满的交给运维部署，一上线，就是页面资源找不到了，跳转页面白屏了。等各种问题，这大概率就是配置问题。有这么两个配置 base 和 publicPath, 这个两个配置在 vue2 和 vue3 的表现形式不同，下面会详细介绍。这两个配置一般影响的是生成环境，对本地开发没啥影响。
【前端小知识】vue的publicPath
马云
12-13 1214
publicPath配置 项目请求根路径配置 项目在打包后，需要改变访问根路径 在该目录下vue.config.js进行配置 // 项目根目录下的vue.config.js文件 export default { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' } ...
vue（2）-配置（2）publicPath‘./’和‘/’的区别
qq_42440919的博客
12-14 8701
一、含义 ‘./’表示相对路径，表示当前目录下的 ‘/’表示绝对路径，表示根目录下的。 二、build后 正式环境：打包后的类似<scriptsrc="static/js/index.752b9949.js"> 测试环境：scripttype="text/javascript"src="/static/js/index.js"> 三、配置 不推荐：publicPath:process.env.NODE_ENV==="production"?"./":"/"...
vue（1）-配置（1）publicpath、nginx、vue-router的base
qq_42440919的博客
12-14 5288
如果要加前缀，三者要保持一致。 一、配置含义 publicPath是控制静态资源访问路径。 router的base是控制路由跳转前缀。 nginx是控制静态资源放在服务器的位置，反向代理。 二、配置详情 类型 配置 实际对应地址 publicPath publicPath:'/bbb/' http://localhost:8080/bbb/static/js/7.js router base:'/bbb/', http://loca..
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

---_._---

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值