答案如下：原因是通过测试，这是因为vue文件中的style标签添加了scoped的原因，而scoped的作用是为了保证这些css样式只会对当前vue文件(组件)生效，但是由于其他vue文件(组件)中也有可能会出现相同的class名相同的css样式，于是vue就采用了添加随机后缀的方式防止class名重复的样式出现样式覆盖的情况。
最近发现一个比较奇怪的问题，就是在开发vue中，路由点击跳转到另外一个组件中，样式是不出来的，然后刷新当前页面css样式才加载出来，找了好久才发现这个bug。
进入以后样式是这样的：css样式根本没有加载，这是为什么？
刷新了页面以后才可以出来，本身样式也是这样的：
找了半天原因，一点一点测试才发现
原来渲染的组件的父盒子的class='item'居然影响了css样式的内容，很奇怪，把class='item'修改成比如：class='abc'就可以了。
原文地址和更多信息：
https://www.3mooc.com/front/articleinfo/465
基于vue-cli3的项目，改造成SSR。服务端渲染会提取组件的样式内联到html中，与link标签中的重复，使得页面体积变大，导致响应时间很慢。
原因是ssr会自动进行资源注入 Manual Asset Injection ，包含css、js等。
我们需要的是没有<style>标签的页面
所以通过配置参数，关闭资源注入。
接下来需要把css、js等文件再关联到输出的html中
当创建bundlerender的时候，我们可以使用一个模板，在这个模板里面预置页面所需要的各种资源。
思来想去，csr（客户端渲染）模式下生成的index.html再合适不过了。
而且，当build csr时，我们也可以预置一个模板，在这里添加上第三方的资源
最后是在模板中添加锚点
到这里基本大功告成
贴一下vue.config.js和build script(windows 平台)
