Vue項目尤其是基于.vue單文件格式的項目部署，在build成js文件后發(fā)布到服務器上，一般都是通過nginx反向代理到跟文件目錄后直接訪問，然而由于很多時候沒辦法使用更多的子域名（比如微信公眾號只能有一個域名），所以急需將服務器部署到子目錄。本經(jīng)驗以一次成功的系統(tǒng)部署為例，講解子目錄方式部署Vue工程。

首先介紹一下Poi，我們的項目沒有使用webPack進行前端工程項目管理，使用了Poi進行管理：Develop web apps with no build configuration until you need.也就是說Poi對webpack進行了封裝，0配置開發(fā)Web應用。可以使用poi.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項目如果需要打包到子目錄，必須設置homePage為子目錄。這是第一步

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

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

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

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

 location  /ticket {           alias /root/java/ticket/dist/;           try_files $uri $uri/ @rewrites;        }        location @rewrites {          rewrite ^/(ticket|sign|reimburse)/(.+)$ /$1/index.html last;        }這里$1對應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對應url中的ticket，由于我這里有多個項目共用了rewrite所以邏輯或了三個，如果只有一個子目錄，使用^/(ticket)/(.+)$,這里切記要把ticket擴起來。

這里切記要把ticket擴起來。

項目部署成功！

最新評論