关于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，打包指令

总结

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