這次給大家帶來實戰項目編譯后不在根目錄怎么辦，實戰項目編譯后不在根目錄怎么辦的注意事項有哪些，下面就是實戰案例，一起來看一下。愛掏網 - it200.com
eg. ：
vue-router: history模式 內網環境：192.168.1.1:8080/index.html 外網環境：domain.com/ttsd/index.html
由于開發出來的項目是要部署在客戶方，且客戶并不想單獨拿一個域名（或子域）來部署，這時，打包后的程序就要作一些配置方面的修改了。愛掏網 - it200.com
修改配置文件
1、把打包后的資源引用修改為相對路徑 找到 config/index.js 中 build 屬性下的 assetsPublicPath
build:?{
?...
?assetsPublicPath:?'./'?//?未修改前的配置為?'/'，
}
登錄后復制
2、修改樣式引用的資源文件（圖片、視頻、字體文件等）為相對路徑 找到 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 ，由于部署目錄未知，所以我們可以根據 location.pathname 來獲取到當前訪問的文件路徑，來修改路由。愛掏網 - it200.com
vue-router里提供了一個base的屬性
base類型: string 默認值: "/" 應用的基路徑。愛掏網 - it200.com例如，如果整個單頁應用服務在 /app/ 下，然后 base 就應該設為 "/app/" 。愛掏網 - it200.com
修改路由代碼
function?getAbsolutePath?()?{
?let?path?=?location.pathname
?return?path.substring(0,?path.lastIndexOf('/')?+?1)
}
const?routers?=?new?Router({
?mode:?'history',
?base:?getAbsolutePath(),
?...
})
登錄后復制
至此，打包配置的相關修改已全部完成，項目也能夠正常訪問。愛掏網 - it200.com 但還是會有一個問題，跳轉到某個路由后，刷新頁面，就gg了，頁面為空白，此時就要修改nginx的配置了。愛掏網 - it200.com
修改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 根據實際部署的網站目錄，修改一下就可以。愛掏網 - it200.com 個人感覺還可以通過nginx內置的指令去動態獲取，在下就不太清楚了。愛掏網 - it200.com
相信看了本文案例你已經掌握了方法，更多精彩請關注愛掏網 - it200.com其它相關文章！
推薦閱讀：
VuePress做出個人網頁
如何綁定方向鍵控制div移動
以上就是實戰項目編譯后不在根目錄怎么辦的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！