html页面直接引入vue.js+element ui后，解决ie浏览器兼容性

因为在项目中临时增加两个页面，就没有用 vue-cli 搭框架，直接在 HTML 中引入vue.js 文件。发现其他浏览器都能正常显示，ie 下显示不正常，vue部分没有编译。IE不兼容Vue的原因无非就是编译不了高于ES5的语法,因此解决IE的兼容问题就要将项目中的高级语法转化为IE可以编译的ES5语法。在 vue-cli 中，ie 浏览器下不显示，需要下载安装 babel-polyfill（n

weixin_47152783

1905人浏览 · 2021-06-02 15:48:06

weixin_47152783 · 2021-06-02 15:48:06 发布

因为在项目中临时增加两个页面，就没有用 vue-cli 搭框架，直接在 HTML 中引入vue.js 文件。发现其他浏览器都能正常显示，ie 下显示不正常，vue部分没有编译。

IE不兼容Vue的原因无非就是编译不了高于ES5的语法,因此解决IE的兼容问题就要将项目中的高级语法转化为IE可以编译的ES5语法。

在 vue-cli 中，ie 浏览器下不显示，需要下载安装 babel-polyfill（npm i babel-polyfill），同样的，在 html 中使用 vue 的语法时，也需要引入 babel 和 polyfill。

具体步骤：

下载文件到本地，并且放到自己的 js 文件中；
（1）browser.min.js 源码： https://blog-static.cnblogs.com/files/gxsyj/browser.min.js
（2）polyfill.min.js 源码：https://blog-static.cnblogs.com/files/gxsyj/polyfill.min.js
一定要在引入 vue.js 之前就引入这两个文件。

<script src="../js/browser.min.js"></script>
<script src="../js/polyfill.min.js"></script>

在 script 标签中添加 type=“text/babel”。这里只需要将含有转换es5语法的script标签添加上就可以。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/babel">
  new Vue({
    el: '#app',
    data: function() {
      return { 
        visible: false,
        tableData: []
      }
    },
    methods:{
    }
  })
</script>

4.如果页面中涉及了axios请求，可能出现请求中中文参数乱码现象。

解决方式：

在前端页面中，将参数进行一次encodeURI编码，

axios.get('http://192.127.0.1:8080?jcyUnit'+encodeURI(encodeURI('需转码的文字')))
	.then((res)=>{
		console.log(res)
	 })
							 
	}).catch(function (error) {
		 console.log(error); 
	});

在后端页面中，需要进行解码 jcyUnit = URLDecoder.decode(jcyUnit,“utf-8”);

try {
	jcyUnit = URLDecoder.decode(jcyUnit,"utf-8");
		} catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}

附：在vue-cli工程项目中的解决方案（网上搜的，没有测试）

1.vue-cli2.0项目

1.安装babel-polyfill 执行以下命令，重启服务器： npm install --save babel-polyfill

2.在main.js引入 polyfill import 'babel-polyfill'

3.在webpack.base.conf.js中配置 polyfill: entry: {
    app: ['babel-polyfill','./src/main.js'] },

2.vue-cli3.0项目

1.安装babel-polyfill依赖  npm i babel-polyfill --save-dev

2.在src同级目录下新建vue.config.js文件配置如下

 module.exports = { 	configureWebpack:{ 	// 其他配置 	},
        chainWebpack: config => {
        // 其他配置
        config.entry('main').add('babel-polyfill') // main是入口js文件
        // 其他配置    } }