vue 3.0用history路由打包后出现空白页面

vue 3.0用history路由打包后出现空白页面

原因：

项目没有放在服务器根目录下，放在了服务器的data/app下，那么打开地址是：http://example.com/data/app

但配的路由中并没有data/app，无法找到路径中的组件，所以也就无法渲染了。这就是导致空白的原因

解决方法1：修改router中的index.js，给路由中加一个base的属性，值为 ‘/data/app/’就可以了。代码：
记住这个base，base值两边一定要有"/"，不要写成“data/app”、“/data/app”或者“data/app/”。
其次，这个文件夹是服务器放项目的文件夹，不是你本地项目的文件夹位置！！

const router = new VueRouter({
  mode: 'history',
  base: '/nice/app/', // << 关键
  routes: routers
});

vue3中

module.exports = {
  publicPath: '/data/app/',
}

访问的话就http://localhost:8080/data/app/
如果想还是localhost:8080的话 加个判断

const isProduction = process.env.NODE_ENV !== 'development'; //判断当前环境

module.exports = {
  publicPath: isProduction ?'/data/app/' : '',
}

解决方法2：

在index.html 文件head中加行代码

<base href="/data/app/">

个人更推荐直接配置