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;
}
相关推荐
有来技术10 小时前
Vite 8 全面 Rust 化!vue3-element-admin 升级实战,构建提速 65%
前端·vue.js·前端框架·vue
Jacky-0081 天前
Vue3+elementPlus+Vite项目
vue
VelinX2 天前
【个人学习||vue】vue
vue
苏瞳儿2 天前
前端/后端-配置跨域
前端·javascript·node.js·vue
曲幽2 天前
告别手写 API 胶水代码:FastAPI 与 Vue 的“契约自动机” OpenAPI 实战
python·typescript·vue·fastapi·web·swagger·openapi·codegen
桂森滨2 天前
Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 4️⃣首页开发
前端·typescript·vue
天下无贼!4 天前
【功能实现】基于Vue3+TS实现大文件分片上传
开发语言·javascript·node.js·vue·html5
曲幽4 天前
FastAPI + Vue 前后端分离实战:我的项目结构“避坑指南”
python·vue·fastapi·web·vite·proxy·cors·env
落魄江湖行4 天前
入门篇四:Nuxt4布局系统:让页面框架复用变得简单
前端·vue·nuxt4
色空大师4 天前
网站搭建实操(十)前端搭建
前端·webpack·vue·网站·论坛