vite 打包部署出现的问题

1、部文件打包之后大小超过500KiB,错误信息【 Some chunks are larger than 500 KiB after minification.】

将文件块的大小限制改大一些

在vite.config.js中,build里添加或修改 chunkSizeWarningLimit 属性,单位为KiB

bash 复制代码
build: {
      chunkSizeWarningLimit: 1500
    }

2、项目部署之后页面默认跳转至根目录,或者js、css文件获取的路径为根目录

(1)配置base

将vite.config.js中的base属性设置为网页存放的目录

bash 复制代码
 base: '/项目存放目录/'

(2)配置路由的history属性

将router的index.js中的createWebHistory方法添加项目存放的路径

bash 复制代码
const router = createRouter({
  history: createWebHistory("/项目存放目录"),
})

3、项目部署之后页面刷新导致页面404

配置ngnix location / 属性

bash 复制代码
location / {
   alias   /var/www/html/;
   index  index.html index.htm;
   try_files $uri $uri/ /项目存放目录/index.html;
}
相关推荐
flex88881 天前
【开源】一个基于 Vue3 和 Electron 开发的第三方网易云音乐客户端,具有与官方客户端相似的界面布局
开源·node.js·vue
机构师2 天前
<uniapp><vuex><状态管理>在uniapp中,如何使用vuex实现数据共享与传递?
uni-app·vue·vuex·数据管理
paintstar2 天前
el-scrollbar 获取滚动条高度 并将滚动条保持在低端
前端·学习·vue·css3
霸王蟹3 天前
常见面试题:Webpack的构建流程简单说一下。
前端·笔记·学习·webpack·node.js·vue
虚妄狼3 天前
【Nuxt3】安装 Naive UI 按需自动引入组件
ui·vue
西哥写代码3 天前
基于cornerstone3D的dicom影像浏览器 第十八章 自定义序列自动播放条
前端·javascript·vue
菜是一种态度3 天前
Vue-监听属性
vue·监听属性·深度监听
BuLingLings3 天前
vue3_flask实现mysql数据库对比功能
数据库·mysql·flask·vue
GanGuaGua4 天前
Vue3:脚手架
前端·javascript·css·vue.js·vue
大叔_爱编程4 天前
p024基于Django的网上购物系统的设计与实现
python·django·vue·毕业设计·源码·课程设计·网上购物系统