刚完成 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. Python:深浅拷贝

    导入模块: >>> import copy 深浅拷贝: >>> X = copy.copy(Y) #浅拷贝:只拷贝顶级的对象,或者说:父级对象 >>&g ...

  2. 一种C#开发ActiveX的思路

    由于某些原因,不得不在C#下开发ActiveX插件,而这会带来很多问题,主要有无法在线安装.无法自动更新.由于本人水平有些,这两个问题不一定是这样,如果有大侠知道C#下开发ActiveX插件可实现在线 ...

  3. dubbo框架介绍

    1.背景 (#) 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当网站流量很小 ...

  4. 卸载TwinCat3之后vs未能正确加载包错误解决

    如上图所示错误. 使用vs开发人员命令提示,输入以下代码.会清除所有用户设置,然后就没有错误提示了. devenv /resetuserdata

  5. JSP页面无法识别EL表达式

    昨天一直纠结一个问题,JSP页面无法获取${user}的值,一直显示的是${user},今天解决了,原来是JSP页面无法识别EL表达式. 我的web.xml的声明如下: <!DOCTYPE we ...

  6. 1.SJ-SLAM-14

    1.引言 SLAM:Simultaneous Localization and Mapping 同时定位与地图构建 搭载特定传感器的主体,在没有环境先验信息的情况下,于运动过程中建立环境的模型,同时估 ...

  7. C#基础之--线程、任务和同步:一、异步委托

    创建线程的一种简单方式是定义一个委托,并异步调用它.委托是方法的类型安全的引用. Delegate还支持异步地调用方法.在后台Delegate类会创建一个执行任务的线程. 为了说明委托的异步特性,从一 ...

  8. AtCoder Regular Contest 061 E - すぬけ君の地下鉄旅行【最短路】

    具体题解又要搬大哥的了,嘿嘿~ 请点击:G点我 这道题目的难点就是同一家公司的路直接走不需要再花费,然后多了一个公司这个东西,这个不像是边的副权值(瞎说的)之类的东西,这是对于路来说的,路的属性... ...

  9. grunt和seajs入门之--提取依赖、合并、压缩js文件

    一.安装grunt: npm install -g grunt-cli //安装 npm install grunt –save-dev //安装Grunt最新版本到项目目录中,并将其添加到devDe ...

  10. Android studio改包名

    http://www.cnblogs.com/Kyouhui/p/4632813.html Android Studio,咱们开发安卓的利器,自推出就受到移动开发者的追捧,但一路走来,大家谈到他,充满 ...