欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2024年07月01日 11:38:33   作者：Fighting寧  
這篇文章主要介紹了關(guān)于vite+vue3打包部署問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vite+vue3打包部署問題

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

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

解決

  • vite.config.ts文件
  base: '/zoomVite/',
  • 配置base，zoomVite是生成的包名
  • router/index文件
history: createWebHistory('/zoomVite/'),
  • createWebHistory配置的路徑和base是一致的
  • npm run build運行后生成的打包文件，將名稱改為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、打包時

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

修改packzge.json，打包指令

總結(jié)

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

相關(guān)文章

  • vue引入組件的幾種方法匯總

    vue引入組件的幾種方法匯總

    這篇文章主要介紹了vue引入組件的幾種方法匯總,包括常用的局部引入,這里需要注意在哪個頁面需要就在那個頁面引入、注冊、使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
    2023-10-10
  • 在Vue中使用antv的示例代碼

    在Vue中使用antv的示例代碼

    這篇文章主要介紹了在Vue中使用antv的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06
  • 淺談Vue+Ant Design form表單的一些坑

    淺談Vue+Ant Design form表單的一些坑

    本文主要介紹了淺談Vue+Ant Design form表單的一些坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • vue3結(jié)合hooks開發(fā)可以注冊的二次確認(rèn)彈框

    vue3結(jié)合hooks開發(fā)可以注冊的二次確認(rèn)彈框

    這篇文章主要為大家介紹了vue3結(jié)合hooks開發(fā)可以注冊的二次確認(rèn)彈框，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-12-12
  • Vue + better-scroll 實現(xiàn)移動端字母索引導(dǎo)航功能

    Vue + better-scroll 實現(xiàn)移動端字母索引導(dǎo)航功能

    better-scroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件。這篇文章主要介紹了Vue + better-scroll 實現(xiàn)移動端字母索引導(dǎo)航功能,需要的朋友可以參考下
    2018-05-05
  • webpack如何打包一個按需引入的vue組件庫

    webpack如何打包一個按需引入的vue組件庫

    在vue項目開發(fā)中,我們會將經(jīng)常用到的邏輯或模塊抽象成組件,對于那些多個項目都有用到的組件,可以考慮封裝成組件庫,這篇文章主要給大家介紹了關(guān)于webpack如何打包一個按需引入的vue組件庫的相關(guān)資料,需要的朋友可以參考下
    2022-02-02
  • vue實現(xiàn)頁面渲染時候執(zhí)行某需求的示例代碼

    vue實現(xiàn)頁面渲染時候執(zhí)行某需求的示例代碼

    本文主要介紹了vue實現(xiàn)頁面渲染時候執(zhí)行某需求,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-05-05
  • 基于vue通用表單解決方案的思考與分析

    基于vue通用表單解決方案的思考與分析

    這篇文章主要給大家介紹了基于vue通用表單解決方案的思考與分析，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • Vue3全局配置axios的兩種方式總結(jié)

    Vue3全局配置axios的兩種方式總結(jié)

    在實際項目開發(fā)中,幾乎每個組件中都會用到?axios?發(fā)起數(shù)據(jù)請求,下面這篇文章主要給大家總結(jié)介紹了關(guān)于Vue3全局配置axios的兩種方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-01-01
  • 深入理解vue中的?slot-scope=“scope“

    深入理解vue中的?slot-scope=“scope“

    這篇文章主要介紹了理解vue中的?slot-scope=“scope“，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-12-12

最新評論