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;
}
相关推荐
ZKf30FkG13 小时前
理解 package.json 中的版本控制:“nuxt“: “3.16.0“ vs “nuxt“: “^3.16.0“ 的深层差异
vue
海的诗篇_13 小时前
前端开发面试题总结-vue2框架篇(二)
前端·javascript·css·vue.js·前端框架·vue
伍哥的传说1 天前
Vue3 响应式翻牌抽奖游戏
javascript·vue.js·游戏·前端框架·vue·交互
胡斌附体2 天前
vue父子组件通信的使用, 跟新v-model
vue·v-model·使用场景·emit·子父组件通信·change事件
「、皓子~3 天前
AI创作系列(2):UniApp跨端开发实战 - 海狸IM移动端完全由AI编写
开发语言·人工智能·uni-app·开源·vue·开源软件·ai编程
sunshine_程序媛3 天前
在Vue2项目中引入ElementUI详细步骤
前端·ui·elementui·前端框架·vue
努力了吗梁同学3 天前
Nuxt3 中使用 pnpm 安装的 NuxtImg 使用会提示找不到图片
前端·vue·pnpm·nuxt·nuxtimg
sg_knight3 天前
Rollup vs Webpack 深度对比:前端构建工具终极指南
前端·javascript·webpack·node.js·vue·rollup·vite
二倍本贝4 天前
【慧游鲁博】【12】小程序端 · 智能导览对接后端文物图片识别功能
小程序·uni-app·vue·软件工程
bingbingyihao4 天前
UI框架-通知组件
前端·javascript·vue