詳解Vue項(xiàng)目編譯后部署在非網(wǎng)站根目錄的解決方案
同一個(gè)生產(chǎn)部署項(xiàng)目，基內(nèi)外網(wǎng)的訪問路徑并不相同，內(nèi)網(wǎng)是基于域名根目錄來訪問，而外網(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
由于開發(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)獲取，在下就不太清楚了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
VUE3+Element-plus中el-form的使用示例代碼
這篇文章主要介紹了VUE3+Element-plus中el-form的使用示例代碼,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
vue3簡(jiǎn)易實(shí)現(xiàn)proxy代理實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了Python實(shí)現(xiàn)學(xué)生成績(jī)管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
本篇文章主要介紹了詳解vue-cli中配置sass ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
vue webpack開發(fā)訪問后臺(tái)接口全局配置的方法
今天小編就為大家分享一篇vue webpack開發(fā)訪問后臺(tái)接口全局配置的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue cli webpack中使用sass的方法,需要的朋友可以參考下2018-02-02
vue關(guān)閉瀏覽器退出登錄的實(shí)現(xiàn)示例
本文主要介紹了vue關(guān)閉瀏覽器退出登錄，一般都是根據(jù)根據(jù)beforeunload和unload這兩個(gè)事件執(zhí)行的。本文就詳細(xì)的介紹一下如何實(shí)現(xiàn)，感興趣的可以了解一下2021-12-12
這篇文章為大家詳細(xì)介紹了vue.js中$watch的用法，文中給出了示例代碼，相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友們可以一起看看吧。2016-10-10
Vue中如何實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼
本文主要介紹了Vue中如何實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
html2canvas.js是一款可以在網(wǎng)頁上實(shí)現(xiàn)頁面截圖的js,它使用了html5和css3的一些新功能特性,實(shí)現(xiàn)了在客戶端對(duì)網(wǎng)頁進(jìn)行截圖的功能,這篇文章主要給大家介紹了關(guān)于html2canvas使用的相關(guān)資料,需要的朋友可以參考下2024-03-03
element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡(jiǎn)便方法
走馬燈功能在展示圖片時(shí)經(jīng)常用到,下面這篇文章主要給大家介紹了關(guān)于element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡(jiǎn)便方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03