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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
Javascript的闭包
Dec 31 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
vue中的适配px2rem示例代码
Nov 19 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 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
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
js实现二级导航功能
2017/03/03 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
Python进程间通信之共享内存详解
2017/10/30 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
交通安全教育制度
2014/02/02 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
销售经理岗位职责
2015/01/31 职场文书
业务员管理制度范本
2015/08/06 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python