vue-cli设置publicPath小记


Posted in Javascript onApril 14, 2020

几种设置publicPath后,再对比打包后的index.html文件

测试背景:

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

打包后的文件目录:

├─dist
 ├─css
 ├─img
 └─js
 index.html

一、不设置publicPath时,部署后请求路径:

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

// vue.config.js

module.exports = {
  // publicPath: '',
}
<!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

// vue.config.js

module.exports = {
  publicPath: '/',
}
<!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

// vue.config.js

module.exports = {
  publicPath: './',
}
<!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

// vue.config.js

module.exports = {
  publicPath: 'static',
}
<!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

// vue.config.js

module.exports = {
  publicPath: './static',
}
<!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

// vue.config.js

module.exports = {
  publicPath: '../static',
}
<!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

// vue.config.js

module.exports = {
  publicPath: '../',
}
<!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>

到此这篇关于vue-cli设置publicPath小记的文章就介绍到这了,更多相关vue-cli设置publicPath内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
vue 实现用户登录方式的切换功能
Apr 14 #Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 #Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 #Javascript
编写一个javascript元循环求值器的方法
Apr 14 #Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 #Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 #Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 #Javascript
You might like
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
虚拟机下载python是否需要联网
2020/07/27 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
酒店司机岗位职责
2013/12/14 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
党员违纪检讨书
2015/05/05 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
Python函数对象与闭包函数
2022/04/13 Python
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技