elfecho / blog Goto Github PK

使用vue开发过一段时间了，采用 Vue-cli脚手架中出现一些页面空白问题的解决方法总汇

1.npm run build打包页面空白
我们会发现页面head中引用的js和css文件是出现了路径错误，这里修改如下：

解决位置：config/index.js文件：把assetsPublicPath: '/'改为assetsPublicPath: './'

build: {
    assetsPublicPath: './',
}

2. iOS的Safari下无法打开网页
   webpack-dev-server >= 2.8.0 的版本在 iOS Safari 下无法打开网页，效果为白屏。

控制台报错：Can't find variable: SockJS 应该是 Safari 的 BUG，比如下面的代码就会抛出

Error eval("const a = function () {}; function b() { a(); }; b();")
解决方法
1.使用老版本：
yarn add webpack-dev-server@~2.7.0 -D
2.其它方法
yarn add babel-plugin-transform-es2015-block-scoping -D
修改 webpack 相关配置

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    ...,
    /node_modules\/webpack-dev-server/
  ]
}