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
原创文章 18 获赞 22 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_42618523/article/details/88890547