這次給大家?guī)?lái)實(shí)戰(zhàn)項(xiàng)目編譯后不在根目錄怎么辦，實(shí)戰(zhàn)項(xiàng)目編譯后不在根目錄怎么辦的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
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)目是要部署在客戶方，且客戶并不想單獨(dú)拿一個(gè)域名（或子域）來(lái)部署，這時(shí)，打包后的程序就要作一些配置方面的修改了。
修改配置文件1、把打包后的資源引用修改為相對(duì)路徑 找到 config/index.js 中 build 屬性下的 assetsPublicPathbuild: {
... 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)前訪問(wèn)的文件路徑，來(lái)修改路由。
vue-router里提供了一個(gè)base的屬性base類型: 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)目也能夠正常訪問(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#nginxlocation / {
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)獲取，在下就不太清楚了。
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！推薦閱讀：
VuePress做出個(gè)人網(wǎng)頁(yè)如何綁定方向鍵控制div移動(dòng)以上就是實(shí)戰(zhàn)項(xiàng)目編譯后不在根目錄怎么辦的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
目錄 不在 編譯本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請(qǐng)注明出處，感謝您的尊重！
上一篇：
VuePress做出個(gè)人網(wǎng)頁(yè)
下一篇：
如何獲取dom內(nèi)class的值相關(guān)文章相關(guān)視頻修改微信號(hào)有什么影響嗎？微信中共享實(shí)時(shí)位置什么意思數(shù)據(jù)庫(kù)設(shè)計(jì)的基本原則是什么？微信小程序調(diào)用圖片安全API實(shí)戰(zhàn)項(xiàng)目編譯后不在根目錄怎么辦Perl 目錄操作php 目錄處理函數(shù)Linux 系統(tǒng)目錄結(jié)構(gòu)Linux 文件與目錄管理2015年最新Android基礎(chǔ)入門(mén)教程目錄 [溫州做微信公眾號(hào)]