解决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 路由返回恢复页面状态的操作方法
在使用 Vue 开发前端的时候遇到一个场景在首页进行一些数据搜索，点击搜索结果进入详情页面，浏览详情页后返回主页，所以需要在返回后恢复跳转前的页面参数状态，今天通过本文给大家分享Vue 路由页面状态返回的操作方法，一起看看吧
2021-07-07
vue实现修改标签中的内容:id class style
这篇文章主要介绍了vue实现修改标签中的内容：id class style，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue父组件点击触发子组件事件的实例讲解
下面小编就为大家分享一篇vue父组件点击触发子组件事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue props使用typescript自定义类型的方法实例
这篇文章主要给大家介绍了关于vue props使用typescript自定义类型的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-01-01
vue多页面项目实现版本快照功能示例详解
这篇文章主要为大家介绍了vue多页面项目实现版本快照功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
vue子传父关于.sync与$emit的实现
这篇文章主要介绍了vue子传父关于.sync与$emit的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue中的$含义及其用法详解($xxx引用的位置)
$是在vue中所有实例中都可用的一个简单约定,这样做会避免和已被定义的数据,方法,计算属性产生冲突,下面这篇文章主要给大家介绍了关于vue中$含义及其用法的相关资料,需要的朋友可以参考下
2023-04-04
Ant Design Vue Table组件合并单元格方式
这篇文章主要介绍了Ant Design Vue Table组件合并单元格方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
详解Element-ui NavMenu子菜单使用递归生成时使用报错
这篇文章主要介绍了详解Element-ui NavMenu子菜单使用递归生成时使用报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
vue2 router 动态传参,多个参数的实例
下面小编就为大家带来一篇vue2 router 动态传参,多个参数的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11