vue 打包之后为空白页（路径问题）

最新推荐文章于 2024-07-11 13:01:52 发布

原创最新推荐文章于 2024-07-11 13:01:52 发布 · 738 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#打包问题 #空白页

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了Vue项目打包后出现空白页的问题及解决方法，主要分为两部分：一是调整资源引用路径，二是解决由模式设置和浏览器兼容性引起的白屏。

vue 打包之后为空白页

一、打包后的dist目录下的文件引用路径不对，找不到资源导致白屏（80%都是这么导致的）

1.修改config > index.js里的assetsPublicPath的'/’成为'./'

dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: './',  //将这里改成./
    proxyTable: {},
    host: 'localhost',
    port: 8080,
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,
    devtool: 'cheap-module-eval-source-map',
    cacheBusting: true,
    cssSourceMap: true
  },

2.在build > util.js 里找到ExtractTextPlugin.extract，加上publicPath: '../../'

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

在打包一下就可以了，也可以直接扔到服务器里了，

二、剩下的20% :

1.可能是把默认模式的hash改成了history了，
改回默认的hash就可以
如果非要使用history模式的话，要在服务器加一个所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。

2.在项目中使用了es6语法，一些浏览器不支持es6，造成编译错误
这种情况可以：

1.  npm install --save-dev babel-preset-es2015
2.  npm install --save-dev babel-preset-stage-3