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

2,481 阅读1分钟

最近项目中使用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就可以正常查看了。搞定!!!!