前言：
在Vue项目开发中，或多或少都踩过build 打包的坑，这里针对build打包后，需要查看dist页面出现空白，和后续css样式出现混乱的最快解决方法！！
正文：
项目完成后，开始打包，不多说，直接 npm run build 命令，回车。
（注：前提是你需要安装 node.js环境,否则无法运行，不懂自行Google。）
在 build 打包完成后，在我们的项目目录里面，会多出一个 dist文件。没有就刷新一下。
如图所示：
问题1：
这就已经打包好了，现在点开文件，运行 index.html，会出现一片空白，并且 F12 查看会报错！那是路径错误，现在我们就来解决它。
第一步：由于打包后读取的路径不对，首先需要修改config/index.js文件。
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', //此处 '/' 修改为 './' /** * Source Maps */ .......
修改后，在 npm run build 重新打包一次，就可以看见正常的页面了。
问题2：
按照上面方法处理，现在我们已经可以打开页面预览效果了，可是，打包的img文件不一定按照我们预想的出现，这里就出现图片不显示的问题，也是路径读取错误。
处理方法：
我们需要配置 build 打包文件中的图片路径。
如图：找到build 文件下面的 utils.js
找到 ExtractTextPlugin.extract ,进行配置
如图：
修改完成后，在重新打包一次即可解决。
问题3：
打开页面后，引用的图片可以正常显示，如果你的页面使用了相同的class 命名，你的页面会出现，莫名其妙的样式塌陷，缺失等问题。这里，你需要重新梳理命名，且规范命名。
除此之外，还有方法可以进行解决，但只能解决大部分问题，部分冲突还得自行手动解决。
有内容，无样式，解决方法：
查看 build文件下的 webpack.prod.conf.js ,进行修改，如图
有写版本，在项目构建中，并未生成 OptimezeCSSPlugin({ ...}) 这个函数，就是这个坑害死人，但现在多数都会生成，知道就好。
回答，关于样式扯淡变形问题，解决方法：
不知道，大家有没有注意并查询过 <style scoped>...</style> 中 scoped这个属性，特别是新手，这个属性是 范围样式的意思，<style scoped>也是H5的新特性，它用来限制样式只适用于当前组件，避免组件间的样式干扰。没有scoped 的话，在里面添加一个就可以了。但对于命名重复导致的样式冲突的问题，还是存在，需要自行更改解决，所以，在代码书写，及命名上，请遵循行业规范。
如果，还是没有解决问题，那最可能的问题就是，你的mian.js中样式引入的顺序问题，样式没有生效，可能是被第三方组件样式覆盖了，将router放在最后面引入，就可以实现组件样式在第三方样式之后渲染。
好的，针对标题的问题解决方法到处结束！谢谢。