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 相关文章推荐
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 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
农民C键的运用技巧
2020/03/04 星际争霸
一个php作的文本留言本的例子(四)
2006/10/09 PHP
简单采集了yahoo的一些数据
2007/02/14 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
js Date概念详细介绍
2013/11/22 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
分析在Python中何种情况下需要使用断言
2015/04/01 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
python实现备份目录的方法
2015/08/03 Python
python发送邮件实例分享
2017/07/28 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
施工班组长岗位职责
2014/01/05 职场文书
青年文明号创建承诺
2014/03/31 职场文书
cf战队收人口号
2014/06/21 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
庆祝儿童节标语
2014/10/09 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL