关于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引入组件的几种方法汇总,包括常用的局部引入,这里需要注意在哪个页面需要就在那个页面引入、注册、使用,本文结合示例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-10-10
在Vue中使用antv的示例代码
这篇文章主要介绍了在Vue中使用antv的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
浅谈Vue+Ant Design form表单的一些坑
本文主要介绍了浅谈Vue+Ant Design form表单的一些坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
vue3结合hooks开发可以注册的二次确认弹框
这篇文章主要为大家介绍了vue3结合hooks开发可以注册的二次确认弹框，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
Vue + better-scroll 实现移动端字母索引导航功能
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。这篇文章主要介绍了Vue + better-scroll 实现移动端字母索引导航功能,需要的朋友可以参考下
2018-05-05
webpack如何打包一个按需引入的vue组件库
在vue项目开发中,我们会将经常用到的逻辑或模块抽象成组件,对于那些多个项目都有用到的组件,可以考虑封装成组件库,这篇文章主要给大家介绍了关于webpack如何打包一个按需引入的vue组件库的相关资料,需要的朋友可以参考下
2022-02-02
vue实现页面渲染时候执行某需求的示例代码
本文主要介绍了vue实现页面渲染时候执行某需求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-05-05
基于vue通用表单解决方案的思考与分析
这篇文章主要给大家介绍了基于vue通用表单解决方案的思考与分析，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-03-03
Vue3全局配置axios的两种方式总结
在实际项目开发中,几乎每个组件中都会用到 axios 发起数据请求,下面这篇文章主要给大家总结介绍了关于Vue3全局配置axios的两种方式,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-01-01
深入理解vue中的 slot-scope=“scope“
这篇文章主要介绍了理解vue中的 slot-scope=“scope“，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12