vue 打包之后为空白页（路径问题）_项目打包后文件hash名变了所以白屏

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
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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)
    }
1
2
3
4
5
6
7
8
9

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

二、 剩下的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
1
2