Vue根据浏览器版本加载不同的组件

今天测试vue项目的时候，发现ie9上运行一片白屏，地址栏也没有直接跳转到redirect的子组件中，控制台中发现错误'Blob' undefined

于是重新创建项目，一点点添加原项目中添加组件

原来不是es6语法的问题，也不是route的问题，

最终发现是vue import的一个库导致的--vue-cropper，npm install --save vue-cropper没问题，但是在main.js中import的时候就出现问题了，于是只能尝试在main.js中动态加载vue-cropper

import 'babel-polyfill'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()
import App from './App'
import router from './router'
import axios from 'axios'
import qs from 'qs'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "./assets/common.css"
// import VueCropper from 'vue-cropper'

Vue.prototype.global = {
	detectIE() {
		var ua = window.navigator.userAgent;

		// Test values; Uncomment to check result …

		// IE 10
		// ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';

		// IE 11
		// ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';

		// Edge 12 (Spartan)
		// ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';

		// Edge 13
		// ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';

		var msie = ua.indexOf('MSIE ');
		if (msie > 0) {
			// IE 10 or older => return version number
			return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
		}

		var trident = ua.indexOf('Trident/');
		if (trident > 0) {
			// IE 11 => return version number
			var rv = ua.indexOf('rv:');
			return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
		}

		var edge = ua.indexOf('Edge/');
		if (edge > 0) {
			// Edge (IE 12+) => return version number
			return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
		}

		// other browser
		return false;
	},
}

Vue.config.productionTip = false
Vue.prototype.axios = axios
Vue.prototype.$qs = qs

var version = Vue.prototype.global.detectIE()
if(version && version<10){}else{
	console.log("version less ie 10")
	// var VueCropper = require('vue-cropper')
	// console.log(VueCropper)
	// Vue.use(VueCropper.default)

	import('vue-cropper').then(compontent=>{
		console.log("use", compontent)
		// console.log("use", VueCropper)
		Vue.use(compontent.default)
	})
}

Vue.use(ElementUI)
// Vue.use(VueCropper)

注释掉了以前的import方式，改用ie浏览器版本判断是否需要加载vue-cropper，

亲测有效