几种设置publicPath后，再对比打包后的index.html文件
测试背景：
每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录
部署的时候，是部署在服务器的一个/test文件夹下
打包后的文件目录：
├─dist ├─css ├─img └─js index.html
一、不设置publicPath时，部署后请求路径：
// vue.config.js module.exports = { // publicPath: '', }
<!DOCTYPE html> <html lang=en> <head> <title>test</title> <link href=https://www.jb51.net/css/app.0b79487b.css rel=preload as=style> <link href=https://www.jb51.net/js/app.ba2d9b8a.js rel=preload as=script> <link href=https://www.jb51.net/js/chunk-vendors.e7ac9ff2.js rel=preload as=script> <link href=https://www.jb51.net/css/app.0b79487b.css rel=stylesheet> </head> <body> <div id=app></div> <script src=https://www.jb51.net/js/chunk-vendors.e7ac9ff2.js></script> <script src=https://www.jb51.net/js/app.ba2d9b8a.js></script> </body> </html>
二、设置为/时，部署后请求路径：
// vue.config.js module.exports = { publicPath: 'https://www.jb51.net/', }
<!DOCTYPE html> <html lang=en> <head> <title>test</title> <link href=https://www.jb51.net/css/app.0b79487b.css rel=preload as=style> <link href=https://www.jb51.net/js/app.ba2d9b8a.js rel=preload as=script> <link href=https://www.jb51.net/js/chunk-vendors.e7ac9ff2.js rel=preload as=script> <link href=https://www.jb51.net/css/app.0b79487b.css rel=stylesheet> </head> <body> <div id=app></div> <script src=https://www.jb51.net/js/chunk-vendors.e7ac9ff2.js></script> <script src=https://www.jb51.net/js/app.ba2d9b8a.js></script> </body> </html>
三、设置为./时，部署后请求路径：
:8888/test/css/app.0b79487b.css
// vue.config.js module.exports = { publicPath: './', }
<!DOCTYPE html> <html lang=en> <head> <title>test</title> <link href=https://www.jb51.net/css/app.0b79487b.css rel=preload as=style> <link href=https://www.jb51.net/js/app.8569d42d.js rel=preload as=script> <link href=https://www.jb51.net/js/chunk-vendors.e7ac9ff2.js rel=preload as=script> <link href=https://www.jb51.net/css/app.0b79487b.css rel=stylesheet> </head> <body> <div id=app></div> <script src=https://www.jb51.net/js/chunk-vendors.e7ac9ff2.js></script> <script src=https://www.jb51.net/js/app.8569d42d.js></script> </body> </html>
四、设置为static时，部署后请求路径：
: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=https://www.jb51.net/static/css/app.0b79487b.css rel=preload as=style> <link href=https://www.jb51.net/static/js/app.d0717808.js rel=preload as=script> <link href=https://www.jb51.net/static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script> <link href=https://www.jb51.net/static/css/app.0b79487b.css rel=stylesheet> </head> <body> <div id=app></div> <script src=https://www.jb51.net/static/js/chunk-vendors.e7ac9ff2.js></script> <script src=https://www.jb51.net/static/js/app.d0717808.js></script> </body> </html>
五、设置为./static时，部署后请求路径：
: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=https://www.jb51.net/static/css/app.0b79487b.css rel=preload as=style> <link href=https://www.jb51.net/static/js/app.d0717808.js rel=preload as=script> <link href=https://www.jb51.net/static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script> <link href=https://www.jb51.net/static/css/app.0b79487b.css rel=stylesheet> </head> <body> <div id=app></div> <script src=https://www.jb51.net/static/js/chunk-vendors.e7ac9ff2.js></script> <script src=https://www.jb51.net/static/js/app.d0717808.js></script> </body> </html>
六、设置为../static时，部署后请求路径：
:8888/static/css/app.0b79487b.css
// vue.config.js module.exports = { publicPath: '../static', }