可能原因:
Vue打包(一般:npm run build)后,Vue会将你的项目中的所有静态资源(如图片、样式表、脚本等)都打包到一个指定的输出目录中。默认情况下,Vue会将这些静态资源的引用路径设置为相对路径,即相对于生成的HTML文件的路径。
然而,有时候你的项目可能会被部署到一个非根目录的位置,比如部署到一个子目录下。所以要修改静态资源的引用路径,否则浏览器在加载这些资源时会去错误的路径下寻找,导致页面出现空白。
解决:在vue.config.js中添加
module.exports = defineConfig({
publicPath: './',
})
注意:如果直接在根目录下,没有子目录不需要添加,vue默认相对于根目录路径。