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 相关文章推荐
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
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
source.php查看源文件
2006/12/09 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Python的形参和实参使用方式
2019/12/24 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
python利用线程实现多任务
2020/09/18 Python
python RSA加密的示例
2020/12/09 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
业务部经理岗位职责
2014/01/04 职场文书
国际贸易求职信
2014/07/05 职场文书
小学庆六一活动总结
2014/08/28 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
Redis数据结构之链表与字典的使用
2021/05/11 Redis
python套接字socket通信
2022/04/01 Python
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA