vue項(xiàng)目部署到非根目錄下的問題及解決
更新時間：2022年04月19日 16:00:10 作者：Starzkg
這篇文章主要介紹了vue項(xiàng)目部署到非根目錄下的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
問題描述
同一個生產(chǎn)部署項(xiàng)目，基內(nèi)外網(wǎng)的訪問路徑并不相同，內(nèi)網(wǎng)是基于域名根目錄來訪問，而外網(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ú)拿一個域名（或子域）來部署，這時，打包后的程序就要作一些配置方面的修改了。
解決方案
1、Vue配置
Vue 2
將 config/index.js 里的 assetsPublicPath: "/", 修改成 assetsPublicPath: "/app/",
// Paths
assetsRoot: path.resolve(__dirname, "../dist"),
assetsSubDirectory: "static",
assetsPublicPath: "/app/", //修改打包后路徑 修改這里
Vue 3
在根目錄下新建 vue.config.js 文件，然后加上以下內(nèi)容：（如果已經(jīng)有此文件就直接修改）
module.exports = {
publicPath: '', // 相對于 HTML 頁面（目錄相同）
}2、修改路由
- 在路由的history模式下，所有的路由都是基于根路徑的，如 /xxxx ，由于部署目錄未知，所以我們可以根據(jù) location.pathname 來獲取到當(dāng)前訪問的文件路徑，來修改路由。
- vue-router里提供了一個base的屬性
- base類型: string 默認(rèn)值: "/" 應(yīng)用的基路徑。例如，如果整個單頁應(yīng)用服務(wù)在 /app/ 下，然后 base 就應(yīng)該設(shè)為 "/app/" 。
router => index.js
增加基礎(chǔ)路徑 base:"/app/"
const router = new Router({
? mode: "history",
? // base: getAbsolutePath(),
? base: "/app/",
? routes: [...]
......動態(tài)獲取根路徑
function getAbsolutePath () {
?let path = location.pathname
?return path.substring(0, path.lastIndexOf('/') + 1)
}
?
const routers = new Router({
?mode: 'history',
?base: getAbsolutePath(),
?...
})vue項(xiàng)目部署在非根目錄下的配置
版本
注：使用版本較新，項(xiàng)目結(jié)構(gòu)可能存在差異。
vue項(xiàng)目配置
src/vue.config.js -- 打包配置（我理解的是打包配置，不確定是不是）
module.exports = {
? ? publicPath: '/pgcweb/',
src/router/index.js -- 路由配置
const router = new VueRouter({
?? ?base: '/pgcweb/',
?? ?//mode: 'history',nginx配置
location ^~ /pgcweb{
? ? alias /xxx/xxx/xxx/dist;
? ? try_files $uri $uri/ /pgcweb/index.html;
}以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了利用Nuxt.js做Vuex數(shù)據(jù)持久化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了Vue使用Markdown文檔的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vue3生命周期原理與生命周期函數(shù)簡單應(yīng)用實(shí)例分析
這篇文章主要介紹了vue3生命周期原理與生命周期函數(shù),結(jié)合簡單實(shí)例形式分析了vue3的生命周期基本原理、以及各個階段的生命周期鉤子函數(shù)功能、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-04-04
Vue?Router4路由導(dǎo)航守衛(wèi)實(shí)例全面解析
這篇文章主要為大家介紹了Vue?Router4路由導(dǎo)航守衛(wèi)實(shí)例全面解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
源碼的重要性相信不用再多說什么了吧,特別是用Vue 框架的,一般在面試的時候面試官多多少少都會考察源碼層面的內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于vue3源碼剖析之簡單實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2021-09-09
我們通過原理講解以及代碼實(shí)例給大家分享了關(guān)于VUE實(shí)現(xiàn)移動下拉刷新的功能，有的朋友可以跟著學(xué)習(xí)下。2018-04-04
今天小編就為大家分享一篇vue之debounce屬性被移除及處理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue+antd實(shí)現(xiàn)折疊與展開組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
web面試MVC與MVVM區(qū)別及Vue為什么不完全遵守MVVM解答
這篇文章主要介紹了web面試中常問問題，MVC與MVVM區(qū)別以及Vue為什么不完全遵守MVVM的難點(diǎn)解答，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09
vue-router中 query傳參和params傳參的使用和區(qū)別講解
這篇文章主要介紹了vue-router中 query傳參和params傳參的使用和區(qū)別講解,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01