vue-cli設定publicPath小記
阿新 • • 發佈：2020-04-17
幾種設定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內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！