關(guān)于vite+vue3打包部署問題

更新時(shí)間：2024年07月01日 11:38:33 作者：Fighting寧

這篇文章主要介紹了關(guān)于vite+vue3打包部署問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vite+vue3打包部署問題

最近使用vite+vue3寫了個(gè)小的demo，發(fā)現(xiàn)打包部署后頁面出不來。

如果是正常把包放在服務(wù)器的根目錄中，項(xiàng)目頁面是可以打開的。但是我要部署的是根目錄dist包里面，外面多了一層文件夾。

解決

vite.config.ts文件

  base: '/zoomVite/',

配置base，zoomVite是生成的包名
router/index文件

history: createWebHistory('/zoomVite/'),

createWebHistory配置的路徑和base是一致的
npm run build運(yùn)行后生成的打包文件，將名稱改為zoomVite。將zoomVite的包放入服務(wù)器下dist文件中

vue3+vite 打包流程參考

1、路由改成hash模式

import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),})

2、在vite.config.ts配置文件

配置如下：防止打包之后頁面空白

export default defineConfig({
  base: './',})

3、打包時(shí)

直接執(zhí)行打包命令 npm run build 會(huì)出現(xiàn)類型檢測錯(cuò)誤

修改packzge.json，打包指令

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue的組件通訊方法總結(jié)大全
這篇文章主要為大家介紹了非常全面vue的組件通訊方法總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue數(shù)組更新及過濾排序功能
Vue為了增加列表渲染的功能，增加了一組觀察數(shù)組的方法，而且可以顯示一個(gè)數(shù)組的過濾或排序的副本。本文將詳細(xì)介紹Vue數(shù)組更新及過濾排序
2017-08-08
vue實(shí)現(xiàn)大文件切片斷點(diǎn)續(xù)傳
上傳文件，基本上用了input框就可以解決，但大文件應(yīng)該怎樣上傳呢，一次性上傳明顯不現(xiàn)實(shí)，因?yàn)槊看我粩嗑W(wǎng)，那就會(huì)從頭開始上傳，所以切片勢在必行，關(guān)鍵就是如何切，怎么保障文件數(shù)據(jù)不會(huì)丟失，同時(shí)優(yōu)化上傳保障機(jī)制，本文就來給大家講講如何上傳大文件
2023-07-07
vue使用Axios做ajax請求詳解
本篇文章主要介紹了vue使用Axios做ajax請求詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
關(guān)于vue中 $emit的用法詳解
這篇文章主要介紹了vue中 $emit的用法，通過實(shí)例代碼給大家介紹了子組件和父組件的相關(guān)知識，需要的朋友參考下吧
2018-04-04
vue-cli自定義創(chuàng)建項(xiàng)目eslint依賴沖突解決方式
vue-cli是vue.js的腳手架,用于自動(dòng)生成vue.js+webpack的項(xiàng)目模板,在創(chuàng)建項(xiàng)目時(shí),如果遇到npm安裝報(bào)錯(cuò),通常是由于依賴版本沖突造成的,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
js節(jié)流防抖應(yīng)用場景,以及在vue中節(jié)流防抖的具體實(shí)現(xiàn)操作
這篇文章主要介紹了js節(jié)流防抖應(yīng)用場景,以及在vue中節(jié)流防抖的具體實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue中路由重定向redirect問題
這篇文章主要介紹了vue中路由重定向redirect問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue之組件內(nèi)監(jiān)控$store中定義變量的變化詳解
今天小編就為大家分享一篇vue之組件內(nèi)監(jiān)控$store中定義變量的變化詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue更新數(shù)據(jù)卻不渲染頁面的解決
這篇文章主要介紹了vue更新數(shù)據(jù)卻不渲染頁面的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08