tit*_*u10 8 internet-explorer-11 vue.js vuetify.js vue-cli-3
我花了几天时间设置了一个vue.js + vue-cli + typescript + vuetify项目以在 IE 11 上运行但没有成功？
我在网上找到了很多帖子，解释了应该如何完成，但没有成功。我试图以几乎所有可能的方式组合下面解释的设置，但没有成功，最终导致许多不同的错误，直到空白页
该应用程序在 Chrome 或 FF 上运行良好
如果有人在 IE 11 中运行这样的应用程序，将不胜感激
上下文（所有最新版本）：
如果某些问题看起来很愚蠢，请原谅我，因为我是 babel/webpack 开发的新手。
我尝试过的和问题：（我已经尝试了以下几乎所有的组合）
npm install babel-polyfill --save按照IE 11的vuetify 设置中的说明使用吗？import 'babel-polyfill'的main.ts是在解释vuetify设置为IE 11在这里？import '@babel/polyfill'在main.ts这里解释npm install @babel/preset-env --save-dev按照此处针对 IE 11的vuetify 设置中的说明使用还是由于vue-cli使用而没有必要？在babel.config.js，我应该替换最初由 vue-cli 创建的内容吗
presets: [
'@vue/app'
]
通过这里解释
presets: ['@babel/preset-env']
或（如在许多地方所见）？
presets: [['@vue/app', useBuiltIns: 'entry' }]]
或添加 2 个预设？
presets: [
['@babel/preset-env'],
['@vue/app', useBuiltIns: 'entry' }]
]
我应该添加一些像这里解释的插件吗？
presets: ['@vue/app'],
plugins: ['@babel/transform-modules-commonjs']
或者像这里的 vue 文档中解释的那样改变它？
presets: [
['@vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
在vue.config.js，我应该添加吗？
transpileDependencies: [
'vuetify',
'vue-i18n',
'vuelidate',
'axios'
]
[解决方案 2019-06-25]
我们终于让它工作了，@blackening 的回答非常有帮助 碰巧我们在 IE 11 中使用 google 出现了 javsacript 错误，"reCaptcha"在以下设置后消失了：
作为先决条件，vue-cli安装并通过选择“将 Babel 与 TypeScript 一起用于自动检测的 polyfill”来创建项目
1）安装core-js@3
npm install core-js@3
2)main.ts像这样编辑：
import 'core-js/stable'
import Vue from 'vue'
import '@/plugins/vuetify'
{...}
3) 编辑babel.config.js
module.exports = {
presets: [
['@vue/app', { useBuiltIns: 'entry' }]
]
}
就是这样！
现在我们正在与 IE 11 CSS 作斗争，但这是一个众所周知的故事......举个例子，在vue仅将样式应用于 IE 时，只需像这样编码
<style scoped>
/* Only for IE 11, wrap div text */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ieMaxWidth90 {
max-width: 90vw; /* 90% view width */
}
}
</style>
我会做部分回答。
1) @vue/app 和 babel 预设包含在 vue-cli 中。
https://cli.vuejs.org/guide/browser-compatibility.html#polyfills
vue-cli 文档中明确说明了这一点。但它也规定：
“如果您的依赖项之一需要 polyfill，您有以下几种选择：
如果依赖项是用您的目标环境不支持的 ES 版本编写的：将该依赖项添加到 vue.config.js 中的 transpileDependencies 选项中”
2）你仍然需要将babel polyfill放入每个入口文件中。
传统上：import '@babel/polyfill'在你的 main.ts 中。
babel-preset-env 的作用是检测你的浏览器列表，然后用它认为必要的任何 polyfill 替换该行。
3) @babel/polyfill 已弃用。谁知道。
有些人需要超重型聚酯填充剂。这就是我。因为 Office-js 中的互联网爆炸+太习惯了尖端技术。这就是 core-js @ 3 的用武之地。
我的 webpack 构建完全是为此目的定制的。但我把它从 vue-cli 中撕下来并从那里进行了修改。
我的 babel 加载器配置：
const BABEL_LOADER = {
loader: 'babel-loader',
options: {
plugins: ['@babel/plugin-syntax-dynamic-import'],
presets: [
// '@vue/app',
['@babel/preset-env', {
targets: {
ie: '11',
browsers: 'last 2 versions',
},
useBuiltIns: 'usage',
corejs: { version: 3, proposals: true },
}],
],
},
};
这是我的条目文件的顶部：
import Vue from 'vue';
import App from './App.vue';
// ------------ Polyfill ------------
import 'core-js/stable';
core-js 取代了 @babel/polyfill。
有关 core-js 的更多阅读：https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the -未来.md