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

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

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

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”，會(huì)覆蓋之前的 dist 文件夾，重新打開 index.html 就可以訪問了

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

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

錯(cuò)誤信息

Some chunks are larger than 500 KiB after minification.

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

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

build: {
      chunkSizeWarningLimit: 1500
    }

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

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

（1）配置base

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

base: '/項(xiàng)目存放目錄/'

（2）配置路由的history屬性

將router的index.js中的createWebHistory方法添加項(xiàng)目存放的路徑

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

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

配置nginx location / 屬性

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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