【Vue3】【转】vue - vue3与vue2.x的区别(一) ：目录结构不一致

版权声明：本文为CSDN博主「紫菀檀ss」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/LiaoFengJi/article/details/119875029

————————————————

今天总结一下vue3与vue2.x的区别 —— 目录结构不一致。由于目录结构的不一致相对的也造成了一些问题的存在，比如打包项目之后打开出现白屏现象。

一、目录结构不一致

 

 

   通过上图可以发现 vue3 的目录结构跟 vue2.x 还是有很大的区别的，特别明显可以看出 vue3 是没有 build 和 config 这两个配置文件夹的，然后 static文件夹 在vue3 变成了 public文件夹，它们同样都是用于存放静态文件。 

二、造成的问题及其解决方法

  当我们直接打包项目之后，如果直接双击打开 index.html，我们会发现页面出现白屏现象，它造成的原因是因为打包后的dist目录下的文件引用路径不对，页面会因为找不到文件而报错导致白屏。

  在vue2.x的时候我们会直接在config下面的index.js文件中找到assetsPublicPath 这个字段，修改它的值为 ‘./’，就可以成功的解决这个白屏现象。如下图：

 

 

 

然后我们看vue3的项目结构，上面我们有比较过vue3和vue2.x的区别了，vue3是没有config这个文件夹的，那么我们要如何处理这个问题呢？此时我们只需要在根目录下创建 vue.config.js 文件，然后在里面暴露出 publicPath：

module.exports = { publicPath:"./" }

这样就可以成功的解决了白屏现象了。

白屏现象：

 

 解决之后：