はじめに：
Vueのプロジェクトの開発では、多かれ少なかれ、ビルドパッケージのため、DISTの必要性が空白のページを参照するには、とフォローCSSスタイル混乱最速のソリューションをビルドパッケージピットを、ステップ！！
本体：
プロジェクトが完了した後、荷造りを始める、言っても過言ではない、直接NPM実行ビルドコマンドを入力し、Enterを押します。
（注記：前提はあなたが自分のGoogleのを理解していない、Node.jsの環境をインストールする必要があり、または実行できないということです。）
ビルドが私たちのプロジェクトディレクトリにパッケージを完了すると、それはdistのファイルのよりになります。これは、更新されません。
図示のように：
質問1：
これはパックされ、今でファイルを開くには、ポイントし、index.htmlを実行し、空白があるだろう、とF12は、エラーが表示されますされています！それは間違ったパスで、そして今、我々はそれを修正する必要があります。
最初のステップ：間違ったパスため、パッケージを読んだ後、最初にconfig / index.jsファイルを変更する必要があります。
構築：{ // のindex.htmlのテンプレート 指数：path.resolve（__ dirnameは、 '../dist/index.html' ）、 // パス assetsRoot：path.resolve（__ dirnameは、 '../dist' ）、 assetsSubDirectory ： '静的' 、 assetsPublicPath： './'、 // 此处'/'修改为./ / * * *出典地図 * / .......
変更後、一度NPM実行ビルドに再パッケージ化され、あなたは、通常のページを見ることができます。
質問 2：
治療の上記の方法によると、そして今、私たちは、ページプレビューを開くために持っているが、我々は予想通り、パッケージIMGファイルが表示されない、問題は絵だけでなく、読み取りエラーのパスを表示しませんここにあります。
アプローチ：
私たちは、ビルドパッケージの画像ファイルへのパスを設定する必要があります。
図：utils.js以下のビルドファイルを見つけます
検索 ExtractTextPlugin.extractを設定します
図：
修改完成后，在重新打包一次即可解决。
问题3：
打开页面后，引用的图片可以正常显示，如果你的页面使用了相同的class 命名，你的页面会出现，莫名其妙的样式塌陷，缺失等问题。这里，你需要重新梳理命名，且规范命名。
除此之外，还有方法可以进行解决，但只能解决大部分问题，部分冲突还得自行手动解决。
有内容，无样式，解决方法：
查看 build文件下的 webpack.prod.conf.js ,进行修改，如图
有写版本，在项目构建中，并未生成 OptimezeCSSPlugin({ ...}) 这个函数，就是这个坑害死人，但现在多数都会生成，知道就好。
回答，关于样式扯淡变形问题，解决方法：
不知道，大家有没有注意并查询过 <style scoped>...</style> 中 scoped这个属性，特别是新手，这个属性是 范围样式的意思，<style scoped>也是H5的新特性，它用来限制样式只适用于当前组件，避免组件间的样式干扰。没有scoped 的话，在里面添加一个就可以了。但对于命名重复导致的样式冲突的问题，还是存在，需要自行更改解决，所以，在代码书写，及命名上，请遵循行业规范。
如果，还是没有解决问题，那最可能的问题就是，你的mian.js中样式引入的顺序问题，样式没有生效，可能是被第三方组件样式覆盖了，将router放在最后面引入，就可以实现组件样式在第三方样式之后渲染。
好的，针对标题的问题解决方法到处结束！谢谢。