小編給大家分享一下實(shí)戰(zhàn)項(xiàng)目編譯后不在根目錄怎么辦，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),旌陽企業(yè)網(wǎng)站建設(shè),旌陽品牌網(wǎng)站建設(shè),網(wǎng)站定制,旌陽網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,旌陽網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

由于開發(fā)出來的項(xiàng)目是要部署在客戶方，且客戶并不想單獨(dú)拿一個(gè)域名（或子域）來部署，這時(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 來獲取到當(dāng)前訪問的文件路徑，來修改路由。

vue-router里提供了一個(gè)base的屬性

base類型: string 默認(rèn)值: "/" 應(yīng)用的基路徑。例如，如果整個(gè)單頁應(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)目也能夠正常訪問。 但還是會(huì)有一個(gè)問題，跳轉(zhuǎn)到某個(gè)路由后，刷新頁面，就gg了，頁面為空白，此時(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è)人感覺還可以通過nginx內(nèi)置的指令去動(dòng)態(tài)獲取，在下就不太清楚了。

看完了這篇文章，相信你對(duì)“實(shí)戰(zhàn)項(xiàng)目編譯后不在根目錄怎么辦”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！