vue在开发环境怎么兼容ie_vue 配置兼容ie浏览器

您现在的位置是：网站首页>>前端技术>>Vue

vue 配置兼容ie浏览器

发布时间：2018-11-26 10:39:46作者：wangjian浏览量：843点赞量：0

vue框架使用了ES6,然而ie浏览器不支持ES6语法,导致使用vue搭建的项目在ie浏览器上面无法运行，这里解决vue框架兼容ie(9+)浏览器问题

1：安装babel-polyfill(解决ie不支持promise对象的问题)npm install --save-dev babel-polyfill

2：使用babel-polyfill插件

在main.js文件的第一行引入babel-polyfill(这里注意第一行引入)import "babel-polyfill"

引入成功后,如果项目还不可以在ie浏览器上正常运行的话,可能是项目中安装了babel-preset-es2015和babel-preset-stage-*,在网上查到的资料大部分安装的是babel-preset-stage-2,然而我的项目安装的项目是babel-preset-stage-3,

3:配置babel-preset-es2015和babel-preset-stage-*

(1)在.babelrc里面进行配置{

"presets": ["stage-3","es2015"], #如果安装的是babel-preset-stage-2使用stage-2

"plugins": ["transform-vue-jsx", "transform-runtime"]

}

(2):配置webpack.base.config.js

在module里配置需要进行编译的文件夹(如下)module:{

rules:[

{

test: /\.js$/,

loader: 'babel-loader',

include: [

resolve('../src'), resolve('../config'),

resolve('../libs'), resolve('../node_modules/iview')

query: {

presets: ['es2015']

}

]

}

重新运行项目,这时候发现报错

Module build failed: ReferenceError: Unknown plugin "transform-vue-jsx"

这是由于webpack无法解析vue-jsx的语法问题

解决：

安装依赖 [babel-plugin-transform-vue-jsx][1]npm install\

babel-plugin-syntax-jsx\

babel-plugin-transform-vue-jsx\

babel-helper-vue-jsx-merge-props\

--save-dev

到此vue配置兼容ie(9+)浏览器问题完美解决

vue在开发环境怎么兼容ie_vue 配置兼容ie浏览器相关推荐

用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...
[vue-cli]不用vue-cli，你自己有搭建过vue的开发环境吗？流程是什么？
[vue-cli]不用vue-cli,你自己有搭建过vue的开发环境吗?流程是什么? 基本概念首先先了解先webpack的基本概念,webpack属于一个构建工具,主要有mode.entry.out ...
从零开始搭建webpack的vue生产/开发环境
一.初始化项目在命令行中敲入如下命令: mkdir Webpack-Vue && cd Webpack-Vue && npm init -y 然后你就可以在你的当前路 ...
vue2.0---搭建vue的开发环境
vue2.0---搭建vue的开发环境一.NPM 使用介绍测试node是否安装完成 cnpm介绍安装cnpm 如果检测失败出现:***权限问题 Powershell 脚本运行的几种权限: 二.命 ...
2022 最新 Mac Vim 开发环境的部署与配置
2022 最新 Mac Vim 开发环境的部署与配置效果图 Vim 插件简介插件名描述 pope/vim-fugitive Vim 编辑器中的 Git 包装器插件,它可以让我们在 Vim 编辑器 ...
win7下python的安装与配置_Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程...
以此文记录Python与Tensorflow及其开发环境的安装与配置过程,以备以后参考. 1 硬件与系统条件 Win7 64位系统,显卡为NVIDIA GeforeGT 635M 2 安装策略 a.由 ...
从unity到unreal4 虚幻4学习笔记一： ue4与vs studio、vs code开发环境的安装与配置
前言学习ue4的理由我是个资深unity玩家,自认为可以使用unity做任何事.对虚幻的仰慕纯属技术信仰,懂的都懂不多解释.我并不打算放弃unity,正所谓艺多不压身,多储备点技术栈也没坏处. u ...
极海APM微控制器基于IAR开发环境搭建与工程调试配置方法
极海APM微控制器基于IAR开发环境搭建与工程调试配置方法 ✨本篇主要针对基于IAR for ARM版本:V9.30.1环境搭建和工程调试配置过程进行介绍,当然也同样适用于基于ARM架构芯片的开发使用 ...
STM32集成开发环境 STM32CubeIDE 安装与配置指南
STM32集成开发环境 STM32CubeIDE 安装与配置指南 Start With STM32CubeIDE 前言一.IDE下载源文件下载安装步骤二.界面汉化牵引信标开始跃迁三.主题 ...
Spark开发环境的搭建与配置（基于Linux）
目录一.部署环境安装说明二.Spark安装 1.Spark下载 2.解压Spark安装包 3.配置环境 4.安装scala(scala要在同一目录下) 一.部署环境安装说明部署环境VMware+ ...

vue在开发环境怎么兼容ie_vue 配置兼容ie浏览器

vue在开发环境怎么兼容ie_vue 配置兼容ie浏览器相关推荐

最新文章

热门文章