Vue-cli项目部署问题及解决方案

1.css样式问题：

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

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

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

为了解决这一问题，在项目的build/webpack.prod.conf.js 中，将extract :true 改为 fasle。

module: {

    rules: utils.styleLoaders({

      sourceMap: config.build.productionSourceMap,

      extract: false

    })

  },

   参考博客：https://github.com/iview/iview/issues/515

 

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

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

.map-menu .ivu-tabs-bar {

  display: none;

}

 

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

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

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

（2） 新建WEB-INF/web.xml 其中添加401、403、404等错误跳转路径如下图：

（3） vue-cli项目config/index.js 中配置项目包名称：

   这里修改assetsPublicPath：/webapps项目名称/，以保证项目的访问路径正确。

 

（4） vue-cli项目src/router/index.js 配置路由：