刚完成 Iblog 博客项目,在 chrome 浏览器调试完后,用 Safari 打开网站,页面一直停留在加载状态。

后来网上说这是 Safari 不支持 ES6 所致。

经过搜索,在 github 上有人遇到并解决了这个问题:

vue-router + webpack dose work on Safari

  • 引入 babel-polyfill 和 whatwg-fetch 模块:
npm install babel-polyfill  whatwg-fetch --save-dev 
  • 然后在 webpack 项目 config 目录下的 index.js 文件中加入:
...
entry: {
app: ['babel-polyfill', 'whatwg-fetch', './src/main.js'],
},
...

重新构建项目,成功在 Safari 中打开项目。

【踩坑】Safari不兼容webpack封装的vue项目的更多相关文章

  1. 手把手使用 Webpack 4 建立 VUE 项目

    手把手使用 Webpack 4 建立 VUE 项目 安装 node.js 略 安装 cnpm 略 安装 webpack cnpm install webpack -g 安装 vue-cli cnpm ...

  2. webpack踩坑之路——构建基本的React+ES6项目

    转自:http://www.cnblogs.com/ghost-xyx/p/5483464.html webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是 ...

  3. 使用 webpack 手动搭建 vue 项目

    webpack 是一个前端工程化打包工具,对于前端工程师来说 webpack 是一项十分重要的技能.下面我们就通过搭建一个 vue 项目来学习使用 webpack 主要环境: node v14.15. ...

  4. better-scroll快速上手及封装(vue项目)

    愿你有诗有梦,有坦荡荡的远方 本文声明:这是一篇学习coderwhy老师的vue2课程的一个笔记,所以本文章是在vue项目中实现,没学过vue的大佬们可以举一反三. 使用场景及介绍 BetterScr ...

  5. vue全家桶安装以及修改webpack配置新增vue项目启动方式

    一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taob ...

  6. 在webpack搭建的vue项目中如何管理好后台接口地址

    在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包, ...

  7. 小程序 ----踩坑 ---安卓iOS兼容等

    关于小程序一些小功能的代码都在这个GitHub上,感兴趣的可以去看看,https://github.com/huihuijiang/miniProgram目前有:列表左滑删除,拖拽浮标 一.小程序坑1 ...

  8. 【React踩坑记六】create-react-app创建的react项目通过iP地址访问(实现局域网内访问)

    同项目组的小伙伴想用自己的电脑访问我电脑上开发阶段的create-react-app创建的react项目. 试过了了各种内网穿透工具ngrok以及localtunnel等. 奈何打开效率实在太过于龟速 ...

  9. webpack初步搭建Vue项目

    对文件进行打包 1. cnpm i -D webpack webpack-cli 本地热更新 1. cnpm i -D webpack-dev-server 处理图片资源 url-loader依赖fi ...

随机推荐

  1. haprox动态下线后端主机

    haproxy可以很好的支持主机下线,不需要编辑配置文件,也不需要重新reload服务,通过本身的socket发送指令即可: 当你的应用程序是高可用状态,一般部署的是>2的,这个时候就可以通过h ...

  2. BZOJ_2369_区间_决策单调性

    BZOJ_2369_区间_决策单调性 Description 对于一个区间集合 {A1,A2……Ak}(K>1,Ai不等于Aj(i不等于J),定义其权值   S=|A1∪A2∪……AK|*|A1 ...

  3. js 异步问题

    如果发现前端的异步请求,network有发送成功而且有返回值,但是没有进前端的callback成功回掉函数内,这时候就需要检查是不是配置文件做了语法限制,只能返回某些数据格式,不能返回某些数据格式. ...

  4. Unix高级环境编程

    [07] Unix进程环境==================================1. 进程终止    atexit()函数注册终止处理程序.    exit()或return语句:    ...

  5. 子组件索引$refs

    $refs只在组件渲染完成之后才填充,并且它是非响应式的,它仅仅作为一个直接访问访问子组件的应急方案-----应当避免的模板中或者计算属性中使用$refs

  6. 3.javascript转换日期字符串为Date对象

    js中文网 阮一峰 1.求format“xxxx年xx月xx日 xx:xx”类型的两个日期天数差 var start = "2017年09月17日 13:51"; var end ...

  7. linux中网络编程<1>

    1 网络编程API (1)网络层的ip地址可以唯一标识网络中的主机,传输层通过协议+端口唯一标识主机中的应用程序.这样以来使用三元组(地址,协议,端口)标识网络的进程. (2)socket---> ...

  8. ThinkPHP3.2.3中,配置文件里配置项的读取

    在ThinkPHP3.2.3的版本中,配置项的读取,有两种情况. 是在PHP文件或者在PHP代码中的读取方法为C函数,例如:C('配置项的名称'); 在HTML模板中的读取方法为,例如{$Think. ...

  9. CodeForces - 566D Restructuring Company 并查集的区间合并

    Restructuring Company Even the most successful company can go through a crisis period when you have ...

  10. 《剑指offer面试题4》替换空格——实现函数把字符串中每个空格替换成“%20”

    思路: 例如把we are happy这个字符串中所有空格替换成"%20",最直接的做法是从头开始扫苗,遇到空格就替换,并且把空格后面的字符都顺序后移.复杂度O(n^2). 重要思 ...