nuxt项目运行在ie报错_nuxt babel-polyfill_JIAgo_on的博客

相关文章推荐

英勇无比的苹果 · Transformer+强化学习,DeepM ...· 3 月前 ·

淡定的松树 · %E3%80%90%E5%A4%8D%E5% ...· 11 月前 ·

高兴的红酒 · 🤯 VS Code | 在VS ...· 1 年前 ·

体贴的红金鱼 · java ...· 1 年前 ·

完美的皮带 · 网络编程之Socket详解 - 知乎· 1 年前 ·

最近公司项目使用服务端渲染，使用nuxt，运行在ie11上报错，提示没有from属性或者方法；这是由于ie浏览器不支持Array.from导致的。
在这里插入图片描述
需要使用babel-polyfill,直接上代码：

package.json

 "dependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-preset-stage-3": "^6.24.1"
nuxt.config.js 
plugins: [
    { src: '@/plugins/poly', ssr: true },
poly.js 
import 'babel-polyfill'
.babelrc 
  "presets": [
      "env",
        "modules": false,
        "useBuiltIns": "entry"
    "stage-3"
                    最近公司项目使用服务端渲染，使用nuxt，运行在ie11上报错，提示没有from属性或者方法；这是由于ie浏览器不支持Array.from导致的。需要使用babel-polyfill,直接上代码：package.json "dependencies": {    "babel-polyfill": "^6.26.0",    "babel-preset-stage-3": "^6.24...
 此插件可让您的nuxt应用程序具有普通的.babelrc文件！
 虽然传统nuxt应用程序你指定你所有的babel的内部配置nuxt.config.js ，一些其他的工具（如jest ）要求与.babelrc 。
 该插件可将.babelrc优雅地注入到nuxt配置中，使您能够从两全其美中nuxt 。
 我们还支持.babelrc.js ， babel.config.js和package.json文件。
npm install --save nuxt-babel
将nuxt-babel添加到您的nuxt.config.js ：
  modules : [
    'nuxt-babel' ,
您还可以指定包含babel配置的目录：
  modules : [
    [ 'nuxt-babel' , { directory : './some/path/' } ,
麻省理工学院。
 :check_mark: 易于配置
 :white_question_mark: 仅在需要时通过使用Feature Detection来延迟加载polyfill
 :high_voltage: 旨在尽快
 :wrench: 支持任何polyfill作为NPM软件包或JS文件
 :star: 支持polyfill.io的
 可以在加载功能之前调用检测功能
Polyfills不包含在捆绑包中，而是单独加载
npm install nuxt-polyfill
 将模块添加到您的nuxt.config.js ：
 export default {
    // Configure polyfills:
    polyfill : {
        features : [
                Feature without 
  var userAgent = navigator.userAgent;
  var isLessIE11 =
    userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
  var isEdge = userAgent.i
				1.pc页面在IE11报错
最近在做PC端的页面，引入了three.js（3d动画）和vue-baidu-map（百度地图）以及vue-awesome-swiper（定制轮播，采用了高版本的swiper），在chrome浏览器和edg是没有问题的，但是在ie11以及下是不行的，并且因为报错阻塞了页面一些业务逻辑的运行。
先来看一下在IE11中的报错（这里只举例引入vue-awesome-swiper引发的错误）
看到错误信息：
2.错误原因
可以看到是因为引入swiper（vue-awesome-swi
				Babel-polyfill 的作用
Babel 包含一个可自定义的 regenerator runtime 和 core-js 的 polyfill。
它会仿效一个完整的 ES2015+ 环境，并意图运行于一个应用中而不是一个库/工具。
preset与plugin的关系:
preset中已经包含了一组用来转换ES6+的语法的插件,如果只使用少数新特性而非大多数新特性,可以不使用preset而只使用对应的转换插件
babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者
IE9的适配问题
IE9是一个老大难的问题，因为它不支持ES6的语法，而且ie9也不知路由中的history模式，所以我在这儿暂时的解决办法如下。文档>>
// nuxt.config.js 
   ** Global router midd...
				Nuxt.js 是一个基于 Vue.js 的服务端渲染 (SSR) 框架，可以帮助开发者快速构建服务端渲染应用。在构建移动端商城项目时，你可以使用 Nuxt.js 来实现服务端渲染，从而提升页面加载速度和 SEO 优化。
要使用 Nuxt.js 构建移动端商城项目，你需要按照以下步骤进行：
1. 安装 Node.js 和 Nuxt.js：在开始使用 Nuxt.js 之前，你需要安装 Node.js 和 Nuxt.js。你可以使用以下命令安装 Nuxt.js：
npm install -g nuxt
2. 创建 Nuxt.js 项目：使用 Nuxt.js 的 create-nuxt-app 工具可以快速创建一个 Nuxt.js 项目。你可以使用以下命令创建项目：
npx create-nuxt-app <项目名称>
3. 安装需要的插件和库：在构建移动端商城项目时，你可能还需要安装一些插件和库，比如 vue-router、vuex 等。你可以使用 npm 命令安装这些插件和库：
npm install vue-router vuex --save
4. 开发应用：现在，你就可以开始开发移动端商城应用了。你可以使用 Nuxt.js 提供的各种功能来构建你的应用。
5. 部署