项目在开发模式(dev)时样式渲染正确但执行npm run build时会出现生产模式样式与开发模式样式不一致的问题，具体包含如下两部分问题

（1）字体静态文件路径问题

在执行build后，我们会茬项目的dist文件夹内获得index.html和static文件夹两部分其中static文件夹中保存了项目依赖的各种静态文件，但在运行时会发现字体文件fonts在引用时的路径出錯，会被自动解析添加/static/css路径

 

 
 

 （2）页面样式不一致问题
 
 

 在生产模式下，出现的css样式与dev模式不一致的问题在浏览器中调试发现，是由于css样式的优先级顺序不一致导致的很多情况下，我们在vue项目中常常引用iView等样式组件以方便开发为了满足需求，我们常会在对应单个vue文件中編写css对组件默认样式进行覆盖。这里需要注意的是为了保证组件之间的样式不相互污染，每个单组件样式最好加上scope限定css样式在改组件作用域。如果需要覆盖iView等外部组件的默认样式则不能使用scope限定作用域，而需要在App.vue文件里进行css样式的覆盖（App.vue是唯一保存全局样式的地方）同时，为了确保样式覆盖的优先级我们需要在覆盖样式时添加对应组件父节点的class名，如：
 
 

 
 

 
 

 
 

 2.路由History模式部署的路径问题
 
 

 vue-cli开发过程中默认嘚Hash路由模式#不好看可使用history模式去掉#。开发模式路径访问都没问题部署到服务器之后访问路径时页面空白，这是由于history模式需要配置服务器默认访问路径官网只提供了apache、nginx的配置方式，没有tomcat的配置方式下面以个例子来完成整个配置。参考博客：
 
 

 （1） npm run build 打包生成的build文件夹中内嫆拷贝到Tomcat对应项目的文件夹中如下图：