關(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引入組件的幾種方法匯總
這篇文章主要介紹了vue引入組件的幾種方法匯總,包括常用的局部引入,這里需要注意在哪個(gè)頁面需要就在那個(gè)頁面引入、注冊、使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2023-10-10
在Vue中使用antv的示例代碼
這篇文章主要介紹了在Vue中使用antv的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
淺談Vue+Ant Design form表單的一些坑
本文主要介紹了淺談Vue+Ant Design form表單的一些坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
vue3結(jié)合hooks開發(fā)可以注冊的二次確認(rèn)彈框
這篇文章主要為大家介紹了vue3結(jié)合hooks開發(fā)可以注冊的二次確認(rèn)彈框，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
Vue + better-scroll 實(shí)現(xiàn)移動(dòng)端字母索引導(dǎo)航功能
better-scroll 是一款重點(diǎn)解決移動(dòng)端（已支持 PC）各種滾動(dòng)場景需求的插件。這篇文章主要介紹了Vue + better-scroll 實(shí)現(xiàn)移動(dòng)端字母索引導(dǎo)航功能,需要的朋友可以參考下
2018-05-05
webpack如何打包一個(gè)按需引入的vue組件庫
在vue項(xiàng)目開發(fā)中,我們會(huì)將經(jīng)常用到的邏輯或模塊抽象成組件,對于那些多個(gè)項(xiàng)目都有用到的組件,可以考慮封裝成組件庫,這篇文章主要給大家介紹了關(guān)于webpack如何打包一個(gè)按需引入的vue組件庫的相關(guān)資料,需要的朋友可以參考下
2022-02-02
vue實(shí)現(xiàn)頁面渲染時(shí)候執(zhí)行某需求的示例代碼
本文主要介紹了vue實(shí)現(xiàn)頁面渲染時(shí)候執(zhí)行某需求,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-05-05
基于vue通用表單解決方案的思考與分析
這篇文章主要給大家介紹了基于vue通用表單解決方案的思考與分析，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Vue3全局配置axios的兩種方式總結(jié)
在實(shí)際項(xiàng)目開發(fā)中,幾乎每個(gè)組件中都會(huì)用到?axios?發(fā)起數(shù)據(jù)請求,下面這篇文章主要給大家總結(jié)介紹了關(guān)于Vue3全局配置axios的兩種方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
深入理解vue中的?slot-scope=“scope“
這篇文章主要介紹了理解vue中的?slot-scope=“scope“，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12