几种设置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>
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue-cli设置publicPath小记”评论...
更新动态
20240524
20240524
- 《范玮琪15CD合集》[WAV+CUE][14.8G]
- 陈慧娴《BackToPriscilla30周年演唱会2CD》[WAV+CUE]
- 【乡村音乐】约翰尼·李《七月十三日、情感》2CD.2024[FLAC+CUE]
- 【发烧唱片】丹拿示范盘《为歌所吻》2014[FLAC+CUE]
- 颜人中.2022-查无此人【中视鸣达】【FLAC分轨】
- 苏慧伦.1996-LEMON.TREE【滚石】【WAV+CUE】
- 萧福德.1995-春秋大梦【飞碟】【WAV+CUE】
- 宇多田光-TheFirstLove【Hi-Res】FLAC
- KOKIA吉田亚纪子-2009-AKIKO∞KOKIA~balance~[FLAC]
- 中国人民解放军军乐团-《28首世界军乐精品大联奏(二)》[FLAC]
- 蓝岚《天空》人声与钢琴的对话[WAV分轨][464M]
- 群星《荒野彪客DTS》中国第一试音天碟 [DTS][440M]
- 贵族音乐《颂钵减压SPA 空灵疗心音乐精选》[320K/MP3][146.49MB]
- 群星.2005-男人魅【TVB.MUSIC】【WAV+CUE】
- 谢采妘.1999-旧情绵绵2CD【南方】【WAV+CUE】