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

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

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

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

npm run build 后，生成了 dist 文件夾，將dist 文件中 index.html 打開不能正?？吹巾撁鎯热?/p>

解決方法

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 打包部署出現的問題

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

錯誤信息

Some chunks are larger than 500 KiB after minification.

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

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

build: {
      chunkSizeWarningLimit: 1500
    }

2、項目部署之后頁面默認跳轉至根目錄

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

（1）配置base

將vite.config.js中的base屬性設置為網頁存放的目錄

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

（2）配置路由的history屬性

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

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

3、項目部署之后頁面刷新導致頁面404

配置nginx location / 屬性

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

總結

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

您可能感興趣的文章:

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