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;
}
相关推荐
学习ing小白7 小时前
JavaWeb - 5 - 前端工程化
前端·elementui·vue
一只小阿乐7 小时前
前端web端项目运行的时候没有ip访问地址
vue.js·vue·vue3·web端
hello_fracong9 小时前
3.Vue2结合element-ui实现国际化多语言i18n
vue
码力码力我爱你15 小时前
QT + WebAssembly + Vue环境搭建
vue.js·vue·wasm·webassembly·emscripten
尸僵打怪兽1 天前
后台数据管理系统 - 项目架构设计-Vue3+axios+Element-plus(0916)
vue.js·vue
是梦终空1 天前
JAVA毕业设计176—基于Java+Springboot+vue3的交通旅游订票管理系统(源代码+数据库)
java·spring boot·vue·毕业设计·课程设计·源代码·交通订票
天下无贼!1 天前
2024年最新版Vue3学习笔记
前端·vue.js·笔记·学习·vue
这个需求建议不做2 天前
vue3打包配置 vite、router、nginx配置
前端·nginx·vue
QGC二次开发2 天前
Vue3 : Pinia的性质与作用
前端·javascript·vue.js·typescript·前端框架·vue
罗_三金2 天前
前端框架对比和选择?
javascript·前端框架·vue·react·angular