您好,欢迎访问锦匠课堂!

13863911184

全国咨询热线

您现在所在位置:主页 > 通知资讯 >

vue项目打包部署解决白屏问题

vue利用npm打包上线时,总是会出现页面空白问题,出现这些问题主要是js文件很资源文件的路径有问题,导致页面不能显示。所以在项目部署时需要修改配置参数。

打包使用的命令 npm run build

一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题)

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
        publicPath:"../../"//[新增或替换]     })
} else {
      return ['vue-style-loader'].concat(loaders)
}

二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题)

注意有两处:12行为dev的配置(开发环境),46行为build的配置(生产环境),可以同时替换或者只替换build中的配置

assetsPublicPath: '/',
修改为 assetsPublicPath:'./'

三:build>>webpack.prod.conf.js,在output模块中添加  publicPath: './' ,如下图所示:

output: {     
    publicPath: './' ,//[新增或替换]     path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

配置好,直接用npm run build生成index.html和static文件