Vue - webpack 打包兼容 360 浏览器和 IE 浏览器

最新推荐文章于 2024-09-23 23:21:14 发布

zhumengzj

最新推荐文章于 2024-09-23 23:21:14 发布

阅读量5.7k

点赞数

分类专栏： vue2 js

vue2 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

参考： IE运行出现的问题

背景

项目使用的是 vue2 , 打包后上传服务器，访问；IE 不显示，360 不显示，老版谷歌浏览器不显示内容。

1. 解决不显示内容

在 index.html 添加下面内容

<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
 1
 
 1

比如：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 最新 ie -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <title>Demo</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. 语法不支持

如果出现语法不支持，比如 includes , 那么使用 babel-polyfill 解决：

下载安装 babel-polyfill ：

npm install babel-polyfill --save-g
 
 1
 
 1

在 main.js 中引入 babel-polyfill 对象：

import 'babel-polyfill'
 
 1
 
 1

这样就兼容了

：http://blog.csdn.net/lablenet/article/details/74536307

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhumengzj

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【bug小总】vue2项目会在低版本的360极速浏览器报错Uncaught SyntaxError: Unexpected token

weixin_52683524的博客

04-19

1718

vue2项目低版本浏览器不兼容，报Uncaught SyntaxError: Unexpected token 项目问题排查过程记录及问题解决

react webpack 打包支持 ie11_还学不会webpack？看这篇

weixin_39767887的博客

01-26

489

Webpack 已经流行好久了，但很多同学使用 webpack 时还是一头雾水，一下看到那么多文档、各种配置、各种 loader、plugin 立马就晕头转向了。我也不例外，以至于很长一段时间对webpack都是一知半解的状态。但是想要继续做好前端，webpack 是必须得跨过的一道坎，其实掌握 webpack 并不难，只是我们没有找到正确的方法。本文就是我自己在学习 webpack 时的一点心得...

参与评论您还未登录，请先登录后发表或查看评论

vue项目在ie、360兼容模式页面显示空白问题

baidu_41601299的博客

10-30

1986

vue项目中，出现在ie与360兼容模式下打开页面呈现空白问题，如下：控制台报main.js中语法错误~ 上网搜了一下，大部分解决方案是在webpack配置中与main.js中引入babel-polyfill进行处理由于项目是使用webpack.config.js手动搭建，并未使用vue-cli脚手架，引入babel-polyfill之后在ie、360浏览器中仍然是显示空白。。。原因在...

vue入门

热门推荐

原小明

07-06

1万+

参考： IE运行出现的问题背景项目使用的是 vue2 , 打包后上传服务器，访问；IE 不显示，360 不显示，老版谷歌浏览器不显示内容。1. 解决不显示内容在 index.html 添加下面内容<meta http-equiv="X-UA-Compatible" content="IE=edge">比如：<!DOCTYPE html> <html> <head> <meta name="vi

VUE项目360兼容模式下判断浏览器ie内核

weixin_59245513的博客

12-29

562

字符不被ie浏览器支持，导致整个script都报错，弹窗也无法弹出，虽然从逻辑上来说不会走到else分支，但是ie内核可能是先解析所有代码再根据具体逻辑展示，再解析的时候就报错了导致整段不执行。如果浏览器判断条件和无支持的语法写在一起，整个<script>标签内的内容都将失效，所以需要将判断条件单独写在一个<script>内。alert('当前浏览器为兼容模式，可切换极速模式来提升您的操作浏览体验!alert('当前浏览器为兼容模式，可切换极速模式来提升您的操作浏览体验!

有关360浏览器对JS的不兼容解决办法

chuanao8829的博客

05-20

2124

昨天修改了FFB的验证脚本，IE、safari、firefox、chorme、QQ浏览器全数通过，唯独使用360浏览器测试时发生了问题。进一步测试，发现只有在360浏览器的极速模式下才会发生不兼容的状况。通过查阅360浏览器的官网得知，该浏览器采用两个内核，分别是IE9和基于Webkit的...

vue ie(兼容模式) 判断是否是在ie浏览器

前端小菜鸡的博客

07-09

7471

2019-07-09 编辑 window.ActiveXObject：判断浏览器是否支持ActiveX控件，只有IE浏览器里面支持ActiveX控件 // 直接在某一事件下面直接判断 //如果是在刚进入页面就判断，写在mounted里面 if (!!window.ActiveXObject || "ActiveXObject" in window) { console.log(...

vue 项目兼容IE浏览器和360浏览器

ishell1021的博客

06-30

1837

vue项目在IE浏览器和360兼容模式显示空白解决方法 1.安装babel-polyfill 模拟ES2015以上的环境，主要用于对ES6新语法不支持的浏览器. 安装:npminstallbabel-polyfill--save-dev 配置: main.js在最顶部添加,确保全面加载 import'babel-polyfill' webpack.base.conf.js中 app入口添加"babel-polyfi...

vue iview 浏览器兼容问题(支持IE9)

学习真香

08-26

2239

vue iview 浏览器兼容问题(支持IE9) 支持到IE9 如果遇到问题, 可以给我留言. 说明具体的问题. js 我们根据浏览器的用户代理字符串, 来区别出是哪种浏览器的哪个版本. 然后, 我们就要根据版本来进行兼容了. vue 浏览器兼容中说明了一些兼容性的处理. 但是, 真正做起来还有一些不明确的地方. 我在下面的文章中, 做了一些我自己的说明. 下面是可能你需要安装的npm包 # 兼容iview npm install -D babel-loader @babel/core @babel/pr

vue-particles-很棒的粒子特效的插件，就是有点那啥...

一只小辣鸡的开发之路

08-18

3505

vue-particles使用记录一、介绍二、组件官方地址三、使用方法四、效果截图五、遇到问题六、使用感受一、介绍 Vue.js component for particles backgrounds SSR compatible 摘自官方，翻译一下：Vue.js版粒子背景组件服务端渲染(SSR:server side render)兼容二、组件官方地址 Demo和用法介绍：https://vue-particles.netlify.app/ github开源地址：https://github.

Vue项目（vue-cli3 + antd）使用babel对IE进行兼容处理之小白踩坑史

a19802007852的博客

02-13

3087

背景：vue-cli3 + ant-design-vue 搭建的后台管理系统需求：兼容IE（过低版本做版本升级提示） ——前期测试环境未做兼容性的处理，导致正式环境测试时发现使用某些浏览器（某360的5.0正式版及盗版Chrome(￢_￢)百度一查说是使用了IE内核）会导致页面无法正常加载影响使用接下来，开始我的踩坑经历… 第一坑：babel-loader 和 babel 需要版本合适并配套使...

vue项目环境搭建（基于vue 2、vuex、element-ui、iview、webpack 3、axios）

Tankic的博客

04-16

771

文章目录介绍环境、涉及的技术池IDE用vue-cli搭建vue项目工程文件目录说明npm常用命令打开cmd窗口，powerShell（win10）窗口的快捷方式介绍众做周知，前端的三大技术框架vue，react，angular。其中vue和react 的争论已多时，这里不再过多赘述。文主，在这此了解到相关知识后大概得出拙见：项目如果不太大，建议vue。大项目适合react。那么大项目到底是个怎...

vue打包后数据在ie中不显示

llkk

01-25

851

1，安装babel-polyfill（低版本不支持es6） cnpm install --save-dev babel-polyfill 2，打开webpack.base.conf.js引入它 require(‘babel-polyfill’) const path = require('path') const utils = require('./utils') const config ...

vue检测是不是360浏览器兼容模式_Vue项目 IE/360浏览器兼容模式下打开空白的问题...

weixin_39746382的博客

12-22

1038

记一次bug解决bug发现项目不复杂,就是一个基于vue-cli3搭建的pc端项目在开发进入后半段的时候发现在360浏览器兼容模式先显示空白而且没有报错,此类问题之前我写react在低版本的qq浏览器上也遇到过,因为当时写的是移动端项目也就没在意网上搜索找到的答案几乎都是Promsie的兼容问题,给出的解决方案是babel-polyfill,script标签引入也好,main.js引入也好,都没有...

vue 脚手架 elementUi element-ui 兼容 ie 360 急速/兼容模式完美处理

gaoqiang1112的博客

07-16

1万+

直接上干货如果你用vue的脚手架弄的项目那么恭喜你要改的也并不多如果是自己搭建的框架那么请滤清框架结构后按我的方法操作即可 1 引入babel-polyfill npm install babel-polyfill --save 2 src下 mains文件 import 'babel-polyfill' 3 build文件夹下web...

Vue兼容360、ie浏览器

CDUT100的专栏

07-18

4666

一、关于babel-polyfill 1、说明：This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool. This polyfill is automatically loaded when using babel-no...

vue检测是不是360浏览器兼容模式_360安全浏览器兼容模式无法访问vue怎么解决？...

weixin_39947396的博客

12-22

2281

360安全浏览器兼容模式无法访问vue怎么解决？下面本篇文章给大家介绍一下vue在IE和360兼容模式下无法显示问题。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。360兼容模式下报错：[vuex] vuex requires a Promise polyfill in this browser.因：360浏览器中包含了两个浏览器一个是IE(Trident内核)，即兼容模式，在使...

为了兼容IE，配置Babel+Webpack

苦作舟的空城机

10-24

3455

前端开发过程中，很可能需要兼容IE浏览器（虽然很无奈就是了），在兼容IE浏览器时要十分小心，因为IE是不支持es2015以上的，所以你可能会发现Promise、箭头函数等方式通通报错。 Webpack 前端项目化的过程中，很多都会使用到Webpack、Gulp等工具。这里我使用的是Webpack，对于Webpack的项目配置因为以前也具体说过，所以这里不再做过多的讲述了。参考链接：简单的前端项目配置 webpack打包typescript webpack5热更新打包TS 一、使用的javascri