vue-cli项目打包之后出现空白页的解决办法

最近项目中使用vue-cli生成模板，开发环境中页面正常显示，打包后放到tomcat服务器上页面空白，页面内容不显示。F12状态下看到css和js文件路径不对。把index.html文件中引用js和css路径前的static前的'/'去掉就可以正常显示了。 但是，我总不能每次打包后来index.html中该路径吧，这也太麻烦了。 网上查资料好久，终于找到一种方法，特此记录如下。

• 第一步，对config文件夹下的index.js进行修改

build: {
    ...省略
    assetsPublicPath: './',
    ...省略
  }
复制代码

• 第二步，在util.js中修改

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath:'../../'//关键句
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}
复制代码

重新打包项目放到tomcat就可以正常查看了。搞定！！！！