怎么在Vue項目中部署子目錄

本篇文章給大家分享的是有關(guān)怎么在Vue項目中部署子目錄，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

使用了Poi進行管理：Develop web apps with no build configuration until you need.也就是說Poi對webpack進行了封裝，0配置開發(fā)Web應(yīng)用?？梢允褂胮oi.config.js文件配置poi的配置，也可以直接在package.json中進行配置。

執(zhí)行npm run dev相當于執(zhí)行poi，執(zhí)行npm run dist相當于執(zhí)行poi build.執(zhí)行poi build打包后,會將static目錄下的資源拷貝到dist目錄，其他的js和css會自動壓縮成.js 和.css并且注入到index.html中。

poi項目如果需要打包到子目錄，必須設(shè)置homePage為子目錄。這是第一步

第二步，必須將index.html中其他非Vue部分的資源增加子目錄的前綴，包括網(wǎng)站的icon.

第三步保證Css文件中的資源路徑為相對路徑。

第四步，需要修改vueRouter中的base為子目錄。

然后執(zhí)行npm run dev 也就是npm build.觀察打包后的index.html,css文件等。

然后配置nginx到二級目錄：       

 location  /ticket {           alias /root/java/ticket/dist/;           try_files $uri $uri/ @rewrites;        }        location @rewrites {          rewrite ^/(ticket|sign|reimburse)/(.+)$ /$1/index.html last;        }這里$1對應(yīng)url中的ticket，由于我這里有多個項目共用了rewrite所以邏輯或了三個，如果只有一個子目錄，使用^/(ticket)/(

然后配置nginx到二級目錄：        location  /ticket {           alias /root/java/ticket/dist/;           try_files $uri $uri/ @rewrites;        }        location @rewrites {          rewrite ^/(ticket|sign|reimburse)/(.+)$ /$1/index.html last;        }這里$1對應(yīng)url中的ticket，由于我這里有多個項目共用了rewrite所以邏輯或了三個，如果只有一個子目錄，使用^/(ticket)/(.+)$,這里切記要把ticket擴起來。

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

以上就是怎么在Vue項目中部署子目錄，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。