关于vite+vue3打包部署问题

更新时间：2024年07月01日 11:38:33 作者：Fighting宁

这篇文章主要介绍了关于vite+vue3打包部署问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vite+vue3打包部署问题

最近使用vite+vue3写了个小的demo，发现打包部署后页面出不来。

如果是正常把包放在服务器的根目录中，项目页面是可以打开的。但是我要部署的是根目录dist包里面，外面多了一层文件夹。

解决

vite.config.ts文件

  base: '/zoomVite/',

配置base，zoomVite是生成的包名
router/index文件

history: createWebHistory('/zoomVite/'),

createWebHistory配置的路径和base是一致的
npm run build运行后生成的打包文件，将名称改为zoomVite。将zoomVite的包放入服务器下dist文件中

vue3+vite 打包流程参考

1、路由改成hash模式

import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),})

2、在vite.config.ts配置文件

配置如下：防止打包之后页面空白

export default defineConfig({
  base: './',})

3、打包时

直接执行打包命令 npm run build 会出现类型检测错误

修改packzge.json，打包指令

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue的组件通讯方法总结大全
这篇文章主要为大家介绍了非常全面vue的组件通讯方法总结，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Vue数组更新及过滤排序功能
Vue为了增加列表渲染的功能，增加了一组观察数组的方法，而且可以显示一个数组的过滤或排序的副本。本文将详细介绍Vue数组更新及过滤排序
2017-08-08
vue实现大文件切片断点续传
上传文件，基本上用了input框就可以解决，但大文件应该怎样上传呢，一次性上传明显不现实，因为每次一断网，那就会从头开始上传，所以切片势在必行，关键就是如何切，怎么保障文件数据不会丢失，同时优化上传保障机制，本文就来给大家讲讲如何上传大文件
2023-07-07
vue使用Axios做ajax请求详解
本篇文章主要介绍了vue使用Axios做ajax请求详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
关于vue中 $emit的用法详解
这篇文章主要介绍了vue中 $emit的用法，通过实例代码给大家介绍了子组件和父组件的相关知识，需要的朋友参考下吧
2018-04-04
vue-cli自定义创建项目eslint依赖冲突解决方式
vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,在创建项目时,如果遇到npm安装报错,通常是由于依赖版本冲突造成的,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下
2024-09-09
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
这篇文章主要介绍了js节流防抖应用场景,以及在vue中节流防抖的具体实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue中路由重定向redirect问题
这篇文章主要介绍了vue中路由重定向redirect问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue之组件内监控$store中定义变量的变化详解
今天小编就为大家分享一篇vue之组件内监控$store中定义变量的变化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue更新数据却不渲染页面的解决
这篇文章主要介绍了vue更新数据却不渲染页面的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08