关于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(定时器)解决mounted不能获取到data中的数据问题
这篇文章主要介绍了Vue(定时器)解决mounted不能获取到data中的数据问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue中的循环遍历对象、数组和字符串
这篇文章主要介绍了vue中的循环遍历对象、数组和字符串，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
在Vue当中同时配置多个路由文件的方法案例代码
这篇文章主要介绍了在Vue当中同时配置多个路由文件的方法,包含具体代码，本文分步骤结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-12
vue时间选择控件的使用方式
这篇文章主要介绍了vue时间选择控件的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue父子组件slot插槽的使用
这篇文章主要介绍了vue父子组件slot插槽的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue3搭建组件库开发环境的示例详解
这篇文章给大家分享Vue3搭建组件库开发环境，给大家讲解依次搭建组件库、example、文档、cli，本文内容是搭建组件库的开发环境的过程，感兴趣的朋友跟随小编一起看看吧
2022-11-11
Vite3迁移Webpack5的实现
本文主要介绍了Vite3迁移Webpack5的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
Vue.js结合bootstrap实现分页控件
这篇文章主要为大家详细介绍了Vue.js 合bootstrap实现分页控件的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
使用Vue-router二级路由跳转另一条路由下的子级
这篇文章主要介绍了使用Vue-router二级路由跳转另一条路由下的子级问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue开发移动端h5环境搭建的全过程
在正式使用Vue进行移动端页面开发前,需要做一些前置工作,下面这篇文章主要给大家介绍了关于vue开发移动端h5环境搭建的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08