解決vite build打包后頁面不能正常訪問的情況

更新時間：2024年03月15日 16:32:57 作者：零OO

這篇文章主要介紹了解決Vite打包后直接使用瀏覽器打開,顯示空白問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vite build打包后頁面不能正常訪問

npm run build 后，生成了 dist 文件夾，將dist 文件中 index.html 打開不能正?？吹巾撁鎯?nèi)容

解決方法

1.配置 vite.config.ts / vite.config.js文件

配置 base: ‘./’

export default defineConfig({
  base: './',
  // 、、、省略其他配置
})

2.修改路由模式為 Hash 模式

import { createRouter, createWebHashHistory } from 'vue-router'

配置好后，重新 “npm run build”，會覆蓋之前的 dist 文件夾，重新打開 index.html 就可以訪問了

vite 打包部署出現(xiàn)的問題

1、部文件打包之后大小超過500KiB

錯誤信息

Some chunks are larger than 500 KiB after minification.

將文件塊的大小限制改大一些

在vite.config.js中，build里添加或修改 chunkSizeWarningLimit 屬性，單位為KiB

build: {
      chunkSizeWarningLimit: 1500
    }

2、項目部署之后頁面默認(rèn)跳轉(zhuǎn)至根目錄

或者js、css文件獲取的路徑為根目錄

（1）配置base

將vite.config.js中的base屬性設(shè)置為網(wǎng)頁存放的目錄

base: '/項目存放目錄/'

（2）配置路由的history屬性

將router的index.js中的createWebHistory方法添加項目存放的路徑

const router = createRouter({
  history: createWebHistory("/項目存放目錄"),
})

3、項目部署之后頁面刷新導(dǎo)致頁面404

配置nginx location / 屬性

location / {
   alias   /var/www/html/;
   index  index.html index.htm;
   try_files $uri $uri/ /項目存放目錄/index.html;
}

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue中多路由表頭吸頂實現(xiàn)的幾種布局方式
這篇文章主要介紹了vue項目多路由表頭吸頂實現(xiàn)的幾種布局方式,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04
解決vue-photo-preview 異步圖片放大失效的問題
這篇文章主要介紹了解決vue-photo-preview 異步圖片放大失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue2結(jié)合echarts實現(xiàn)一個地圖的效果
這篇文章主要介紹了vue2結(jié)合echarts實現(xiàn)一個地圖的效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家何用vue和echarts實現(xiàn)一個地圖有一定的幫助,感興趣的朋友一起看看吧
2024-03-03
Element-ui el-tree新增和刪除節(jié)點后如何刷新tree的實例
這篇文章主要介紹了Element-ui el-tree新增和刪除節(jié)點后如何刷新tree的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
ant-desigin-vue中form表單的使用解讀
這篇文章主要介紹了ant-desigin-vue中form表單的使用解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue使用百度地圖實現(xiàn)城市定位
這篇文章主要為大家詳細(xì)介紹了Vue使用百度地圖實現(xiàn)城市定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
vue實現(xiàn)上傳圖片添加水印(升級版)
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)上傳圖片添加水印的升級版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
vue-ajax小封裝實例
下面小編就為大家?guī)硪黄獀ue-ajax小封裝實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
Vue3中響應(yīng)式解構(gòu)props的使用
本文主要介紹了Vue3中響應(yīng)式解構(gòu)props的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-11-11
vue引入組件的幾種方法匯總
這篇文章主要介紹了vue引入組件的幾種方法匯總,包括常用的局部引入,這里需要注意在哪個頁面需要就在那個頁面引入、注冊、使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2023-10-10