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;
}
相关推荐
Bl_a_ck1 天前
npm、nvm、nrm
前端·vue.js·npm·node.js·vue
小七de尾巴1 天前
利用pnpm patch给第三方库打补丁
vue·pnpm·patch·补丁
ILUUSION_S1 天前
Vue接口平台学习七——接口调试页面请求体
vue.js·vue
来自星星的坤2 天前
SpringBoot 与 Vue3 实现前后端互联全解析
后端·ajax·前端框架·vue·springboot
XDIGAS2 天前
Dockerfile项目实战-单阶段构建Vue2项目
docker·容器·centos·node.js·vue
风清云淡_A2 天前
【vue3】vue3+express实现图片/pdf等资源文件的下载
javascript·vue
没事别学JAVA2 天前
vue3环境搭建、nodejs22.x安装、yarn 1全局安装、npm切换yarn 1、yarn 1 切换npm
vue.js·node.js·vue
百锦再2 天前
Python实现浏览器模拟访问及页面解析的全面指南
开发语言·前端·javascript·python·vue·框架·react
不掰手腕3 天前
vue+leaflet 区域划分_反向遮罩层
vue
有什么东东3 天前
山东大学软件学院创新项目实训开发日志(12)之将对话记录保存到数据库中
java·数据库·vue·springboot