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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值