Vue/Vite打包后空白以及部署到Gitee后空白解决方法

Vue打包后页面空白解决办法

在vue.config.js（ Vue2是config/index.js ）中添加assetsPublicPath:'./'，如果没有这个文件自己手动建一个，再重新npm run build

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',//此处为修改的地方，这里加. 
..........

Vite打包后页面空白

Vite打包后在本地打开空白是正常的，如果在服务器中还是空白，在vite.config.js文件添加base:'./'，如下，再重新npm run build

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()
  ],
  base:'./' // 添加这个属性
})

打包部署到Gitee后页面空白

• 在本地操作完以上后，可以先在本地服务器看看，Vue-cli打包的可以在本地直接打开，但是Vite打包的需要放到服务器，使用VScode的可以右键，使用Live Server打开如果没问题就可以部署到Gitee或者服务器上了
  
• 先把代码上传到Gitee仓库，打开看看上传的文件有没有违规，如果违规，刷新一下就好，不然部署出来页面是空白的，之后点服务的Gitee Pages部署

• 建议只把打包后的dist里面的文件直接上传，不要把一整个项目上传，否则就可能会空白，即使有配置路径
  
• 建议仓库只传这样
  

这样写就能部署成功了，如果这篇文章对你有帮助的话，可以给个关注哦，我的Gitee账号yyy1203，求给个star