vue2和vue3部署到服務(wù)器子目錄為空白頁(yè)問(wèn)題及解決
更新時(shí)間：2024年07月05日 14:33:29 作者：我是劉拾貳
這篇文章主要介紹了vue2和vue3部署到服務(wù)器子目錄為空白頁(yè)問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
問(wèn)題
今天遇到vue項(xiàng)目部署到服務(wù)器默認(rèn)hash沒(méi)問(wèn)題但是hhistory為空白的問(wèn)題。
研究了一下找到了答案記錄一下
vue項(xiàng)目history模式部署在子路徑
項(xiàng)目打包后默認(rèn)只能部署在服務(wù)器根路徑，如果想 http://www.xxx.com/demo/ 這種形式
vue3+vite配置方法
- 在
vite.config.ts中配置：
export default defineConfig(({ command }) => {
return {
// 在這里增加 base 寫(xiě)子路徑
base: '/demo/',
resolve: { /*......省略*/ }
};
});- 然后在
router中增加：
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
// 給 createWebHistory 方法傳參數(shù)配置子路徑
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
]
})
export default routervue2+cli配置方法
在 vue.config.ts 中配置：
// vue.config.js
const vueConfig = {
// 在這里增加 publicPath寫(xiě)子路徑
publicPath:'/demo/'
//......忽略其他
}
module.exports = vueConfig然后在router 中增加：
export default new Router({
mode: 'history',
// 增加bese信息
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
routes
})vue項(xiàng)目hash模式部署在任意路徑
vue3+vite配置方法
- 把
vite.config.ts中的base配置值為空或者./：
// ......省略其它代碼
export default defineConfig(({ command }) => {
return {
base: '',
//base: './',
};
});- 把
src/router/index.ts中路由history模式改為hash模式：
import { createRouter, createWebHashHistory } from 'vue-router';
// ......省略其它代碼
const router = createRouter({
routes,
history: createWebHashHistory()
});vue2+vueCli配置方法
- 在
vue.config.ts中配置為空或者./：
// vue.config.js
const vueConfig = {
// 在這里增加 publicPath寫(xiě)子路徑
publicPath:'./'
//......忽略其他
}
module.exports = vueConfig然后在router 中設(shè)置hash：
export default new Router({
mode: 'hash',
scrollBehavior: () => ({ y: 0 }),
routes
})總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中如何使用v-model高級(jí)用法參數(shù)綁定傳值
本文給大家介紹Vue3中使用v-model高級(jí)用法參數(shù)綁定傳值的相關(guān)知識(shí),包括單個(gè)輸入框傳值和多個(gè)輸入框傳值,一個(gè)組件接受多個(gè)v-model值,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
這篇文章主要介紹了淺談Vue.use的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue防止白屏添加首屏動(dòng)畫(huà)的實(shí)例
今天小編就為大家分享一篇Vue防止白屏添加首屏動(dòng)畫(huà)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要介紹了vue路由組件按需加載的幾種方法小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
解決nuxt 自定義全局方法,全局屬性,全局變量的問(wèn)題
這篇文章主要介紹了解決nuxt 自定義全局方法,全局屬性,全局變量的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
解決vue3.0運(yùn)行項(xiàng)目warning Insert `·` prettier/pret
這篇文章主要介紹了解決vue3.0運(yùn)行項(xiàng)目warning Insert `·` prettier/prettier問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue中onmounted周期里獲取不到dom的原因及分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3 微信掃碼登錄及獲取個(gè)人信息實(shí)現(xiàn)的三種方法
本文主要介紹了vue3 微信掃碼登錄及獲取個(gè)人信息實(shí)現(xiàn)的三種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
Vue常用的三種傳值方式有:??父?jìng)髯??子傳父??非父子傳值?引用官網(wǎng)的一句話(huà):父子組件的關(guān)系可以總結(jié)為?prop?向下傳遞,事件向上傳遞,熟悉vue各類(lèi)關(guān)系的組件之間傳值方法會(huì)令開(kāi)發(fā)更加得心應(yīng)手,下面將對(duì)父子、兄弟、頁(yè)級(jí)組件之間的傳值作淺談2023-12-12
Vue項(xiàng)目字體文件打包后fonts文件夾消失的原因分析與解決方案
在 Vue 項(xiàng)目中,將字體文件放在 src/assets/fonts 目錄下,打包后在瀏覽器中訪(fǎng)問(wèn)發(fā)現(xiàn)路徑里不見(jiàn)了 fonts文件夾,這通常不是文件丟失,而是 Vue 的構(gòu)建工具對(duì)靜態(tài)資源進(jìn)行了自動(dòng)化處理,本文給大家介紹了Vue項(xiàng)目字體文件打包后fonts文件夾消失的原因分析與解決方案2026-06-06