关于vue3.0打包后转app白屏显示问题解决

因为最近vue刚刚发版了最新版本的vue-cli3,然后想把vue3.0项目打包成app.心想这次改了这么多东西打包能成么？果不其然，web转完app运行后发现白屏。那么咱们接下来就聊聊怎么去解决。

1. 跑各种网站资料翻一翻，突然发现一个有类似问题，一看vue-router的mode配置可能会影像打包后的链接地址，然后看看我自己的router:

         export default new Router({  
                mode: "history",  
                base: process.env.BASE_URL,  
                routes: [{  
                      path: "/home",  
                      name: "home",  
                      component: Home,  
                      meta: {  
                          keepAlive: true  
                      },  
                      children:[]  
                }]  
         })   

配置路由模式:

   hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。  
   history: 依赖 HTML5 History API 和服务器配置。附上链接查看 HTML5 History 模式配置.  
   abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。  

解决办法：

   如果使用history模式上线，必须要服务端在服务器上有对应的模式才能使用history（看上面链接），如果服务器上没有配置，可以先使用默认的hash；当然个人建议还是使用history模式  

2.这会你会发现压缩的项目在本地能访问了，不过通过app打包后还是白屏，那么继续看下面的操作:

   在vue3.0根目录创建一个vue.config.js文件，内部代码如下：  
   module.exports = {   
        publicPath: process.env.NODE_ENV === 'production' ? './' : './'  
   };  

这个主要是修改app中index文件查找js、css、image路径地址导致的白屏。

OK，作为一名合格的前端开发，遇到问题解决问题！对于vue开发我也是一个新手，欢迎大家互相学习！