Vite+Vue3预览打包项目传到GitHub首页空白文件加载报错404的解决办法。

214 阅读1分钟

参考:blog.csdn.net/bosivip/art…

1.路由改为hash模式 默认的老是有问题

image.png

2.vite.config.js

import { fileURLToPath, URL } from 'node:url'  
  
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  
import vueJsx from '@vitejs/plugin-vue-jsx'  
  
// https://vitejs.dev/config/  
export default defineConfig({  
plugins: [  
vue(),  
vueJsx(),  
],  
base:"./", //设置项目的根目录  
build: {  
outDir: 'docs' // 打包文件的输出目录  
},  
resolve: {  
alias: {  
'@': fileURLToPath(new URL('./src', import.meta.url))  
}  
}  
})

build打包后,就会生成docs的文件夹。 登录GitHub,点击setting,静态页面存放在项目的docs路径下部署。等待一会儿后,就会生成page页面的地址了。如下图,我的是baowenqing.github.io/tx_doc_anal…

image.png

点开链接:

image.png