您好,登錄后才能下訂單哦!
小編給大家分享一下如何解決Vue項(xiàng)目編譯后部署在非網(wǎng)站根目錄的問(wèn)題,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
同一個(gè)生產(chǎn)部署項(xiàng)目,基內(nèi)外網(wǎng)的訪(fǎng)問(wèn)路徑并不相同,內(nèi)網(wǎng)是基于域名根目錄來(lái)訪(fǎng)問(wèn),而外網(wǎng)卻指向了一個(gè)子目錄。
eg. :
vue-router: history模式 內(nèi)網(wǎng)環(huán)境:192.168.1.1:8080/index.html 外網(wǎng)環(huán)境:domain.com/ttsd/index.html
由于開(kāi)發(fā)出來(lái)的項(xiàng)目是要部署在客戶(hù)方,且客戶(hù)并不想單獨(dú)拿一個(gè)域名(或子域)來(lái)部署,這時(shí),打包后的程序就要作一些配置方面的修改了。
修改配置文件
1、把打包后的資源引用修改為相對(duì)路徑 找到 config/index.js
中 build
屬性下的 assetsPublicPath
build: { ... assetsPublicPath: './' // 未修改前的配置為 '/', }
2、修改樣式引用的資源文件(圖片、視頻、字體文件等)為相對(duì)路徑 找到 build/utils.js
中,添加(或修改) publicPath
為 '../../'
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' // 修改路徑 }) } else { return ['vue-style-loader'].concat(loaders) }
修改路由
在路由的history模式下,所有的路由都是基于根路徑的,如 /xxxx
,由于部署目錄未知,所以我們可以根據(jù) location.pathname
來(lái)獲取到當(dāng)前訪(fǎng)問(wèn)的文件路徑,來(lái)修改路由。
vue-router里提供了一個(gè)base的屬性
base類(lèi)型: string
默認(rèn)值: "/"
應(yīng)用的基路徑。例如,如果整個(gè)單頁(yè)應(yīng)用服務(wù)在 /app/
下,然后 base
就應(yīng)該設(shè)為 "/app/"
。
修改路由代碼
function getAbsolutePath () { let path = location.pathname return path.substring(0, path.lastIndexOf('/') + 1) } const routers = new Router({ mode: 'history', base: getAbsolutePath(), ... })
至此,打包配置的相關(guān)修改已全部完成,項(xiàng)目也能夠正常訪(fǎng)問(wèn)。 但還是會(huì)有一個(gè)問(wèn)題,跳轉(zhuǎn)到某個(gè)路由后,刷新頁(yè)面,就gg了,頁(yè)面為空白,此時(shí)就要修改nginx的配置了。
修改nginx的配置
官方給的nginx配置是根目錄下的,即 https://router.vuejs.org/zh-cn/essentials/history-mode.html#nginx
location / { try_files $uri $uri/ /index.html; // 需要修改為 try_files $uri $uri/ /dist/index.html; }
注: /dist
根據(jù)實(shí)際部署的網(wǎng)站目錄,修改一下就可以。 個(gè)人感覺(jué)還可以通過(guò)nginx內(nèi)置的指令去動(dòng)態(tài)獲取,在下就不太清楚了。
以上是“如何解決Vue項(xiàng)目編譯后部署在非網(wǎng)站根目錄的問(wèn)題”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。