vue/cli3构建项目开发途中的问题和打包后出现的资源404页面空白等错误消灭方案

不说如何安装，需要的查看文章列表。

我们从构建了一个demo开始，现描述一下界面。页面中写了一个footer切换组件，body中方了一张图片。相当于我们的项目。接下来我们看看项目打包后的样子。执行npm run build后，声称了一个dist文件夹。如图：

如果我们直接右键以 file:// 协议直接打开 dist/index.html 是不会工作的。因为dist 目录需要启动一个 HTTP 服务器来访问。不要慌，可以有2种方法来征服她。

1: 比较机智，算不上方法，只能算途径?。hbuilder提供了一个内置服务器。用它添加文件打开html即可看到?。

2:vue3文档提供一个方法。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器，例如 serve：

https://cli.vuejs.org/zh/guide/deployment.html#%E9%80%9A%E7%94%A8%E6%8C%87%E5%8D%97

?，我们继续往下。你会发现页面是空白的。首先分析页面有没有报错。打开控制台，发现app.css/js都是红色的?。404资源没加载到。于是鼠标放上去查看路径不对。这是我们应该使用相对路径。细心的朋友会发现上图给出的项目结构里面没有vue.config.js这个文件。项目里其实是有的，只是我当时出错的时候没有，为还原和一起解决错误所以没有给朋友们截出来。

我们接着往下。新建一个，里面倒出一个publicPath如图：

 。我刚开始配置的是baseUrl，vue/cli3提示publicPath。配置好后回来看页面。

这时资源引用到了。没有了404..此时此刻页面还是空白的，同时也没有宝错误。继续分析，想到路由有个mode模式。之前考虑到原先的默认模式（也就是地址后面带"#"）进入

查看发现mode是history模式，把它直接去掉。分析到此时，重新打包检查一下。

喜滋滋，可以了?。

综上，根据错误去分析，消灭之后要记录，收藏/保存。