解决vite build打包后页面不能正常访问的情况

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

这篇文章主要介绍了解决Vite打包后直接使用浏览器打开,显示空白问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vite build打包后页面不能正常访问

npm run build 后，生成了 dist 文件夹，将dist 文件中 index.html 打开不能正常看到页面内容

解决方法

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的区别
本文主要介绍了vue中传参params和data的区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
nginx+vue.js实现前后端分离的示例代码
这篇文章主要介绍了nginx+vue.js实现前后端分离的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
typescript+vite项目配置别名的方法实现
我们为了省略冗长的路径，经常喜欢配置路径别名，本文主要介绍了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