解決vite build打包后頁(yè)面不能正常訪問(wèn)的情況

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

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

vite build打包后頁(yè)面不能正常訪問(wèn)

npm run build 后，生成了 dist 文件夾，將dist 文件中 index.html 打開(kāi)不能正?？吹巾?yè)面內(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 文件夾，重新打開(kāi) index.html 就可以訪問(wèn)了

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

1、部文件打包之后大小超過(guò)500KiB

錯(cuò)誤信息

Some chunks are larger than 500 KiB after minification.

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

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

build: {
      chunkSizeWarningLimit: 1500
    }

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

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

（1）配置base

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

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

（2）配置路由的history屬性

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

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

3、項(xiàng)目部署之后頁(yè)面刷新導(dǎo)致頁(yè)面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)文章

超實(shí)用vue中組件間通信的6種方式(最新推薦)
組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互進(jìn)行直接的引用，所以組件間的相互通信是非常重要的，這篇文章主要介紹了vue中組件間通信的6種方式,需要的朋友可以參考下
2022-11-11
vue導(dǎo)出excel表格的新手詳細(xì)教程
相信大家做項(xiàng)目的時(shí)候,功能中都有導(dǎo)出模塊,下面這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出excel表格的詳細(xì)教程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-05-05
Vue3封裝ant-design-vue表格的詳細(xì)代碼
這篇文章主要介紹了Vue3封裝ant-design-vue表格，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-05-05
Vue3 (五)集成HTTP庫(kù)axios詳情
這篇文章主要講解Vue3 集成HTTP庫(kù)axios的相關(guān)內(nèi)容，本文講圍繞如何利用Vue3 集成HTTP庫(kù)axios的相關(guān)資料展開(kāi)文章,需要的朋友可以參考一下，希望對(duì)你有所幫助
2021-10-10
詳解vue 組件
這篇文章主要介紹了詳解vue 組件的相關(guān)知識(shí)，文中講解非常細(xì)致，代碼供大家參考學(xué)習(xí)，感興趣的朋友可以了解下
2020-06-06
vue中傳參params和data的區(qū)別
本文主要介紹了vue中傳參params和data的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
nginx+vue.js實(shí)現(xiàn)前后端分離的示例代碼
這篇文章主要介紹了nginx+vue.js實(shí)現(xiàn)前后端分離的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
typescript+vite項(xiàng)目配置別名的方法實(shí)現(xiàn)
我們?yōu)榱耸÷匀唛L(zhǎng)的路徑，經(jīng)常喜歡配置路徑別名，本文主要介紹了typescript+vite項(xiàng)目配置別名的方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
vue使用wavesurfer.js解決音頻可視化播放問(wèn)題
Wavesurfer.js是一款基于HTML5?canvas和Web?Audio的聲紋可視化插件，功能十分強(qiáng)大，在Vue框架中嵌入使用該插件，今天重點(diǎn)給大家介紹下vue使用wavesurfer.js解決音頻可視化播放問(wèn)題，感興趣的朋友一起看看吧
2022-04-04
解決vue項(xiàng)目獲取dom元素寬高總是不準(zhǔn)確問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目獲取dom元素寬高總是不準(zhǔn)確問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07