解决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项目多路由表头吸顶实现的几种布局方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
解决vue-photo-preview 异步图片放大失效的问题
这篇文章主要介绍了解决vue-photo-preview 异步图片放大失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue2结合echarts实现一个地图的效果
这篇文章主要介绍了vue2结合echarts实现一个地图的效果,本文通过实例代码给大家介绍的非常详细,对大家何用vue和echarts实现一个地图有一定的帮助,感兴趣的朋友一起看看吧
2024-03-03
Element-ui el-tree新增和删除节点后如何刷新tree的实例
这篇文章主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
ant-desigin-vue中form表单的使用解读
这篇文章主要介绍了ant-desigin-vue中form表单的使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
Vue使用百度地图实现城市定位
这篇文章主要为大家详细介绍了Vue使用百度地图实现城市定位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
vue实现上传图片添加水印(升级版)
这篇文章主要为大家详细介绍了vue实现上传图片添加水印的升级版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
vue-ajax小封装实例
下面小编就为大家带来一篇vue-ajax小封装实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue3中响应式解构props的使用
本文主要介绍了Vue3中响应式解构props的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-11-11
vue引入组件的几种方法汇总
这篇文章主要介绍了vue引入组件的几种方法汇总,包括常用的局部引入,这里需要注意在哪个页面需要就在那个页面引入、注册、使用,本文结合示例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-10-10