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

首先介紹一下Poi，我們的項(xiàng)目沒有使用webPack進(jìn)行前端工程項(xiàng)目管理，使用了Poi進(jìn)行管理：Develop web apps with no build configuration until you need.也就是說Poi對(duì)webpack進(jìn)行了封裝，0配置開發(fā)Web應(yīng)用?？梢允褂胮oi.config.js文件配置poi的配置，也可以直接在package.json中進(jìn)行配置。

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

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

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

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

第四步，需要修改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對(duì)應(yīng)url中的ticket，由于我這里有多個(gè)項(xiàng)目共用了rewrite所以邏輯或了三個(gè)，如果只有一個(gè)子目錄，使用^/(ticket)/(

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

這里切記要把ticket擴(kuò)起來。

項(xiàng)目部署成功！

最新評(píng)論