如何使用vuetify项目设置vue-cli以与IE 11一起运行? [英] How to setup a vue-cli with vuetify project to run with IE 11?
问题描述
我花了几天时间设置 vue.js + vue-cli +打字稿+ vuetify 项目，使其无法与IE 11一起运行?
I spend a few days to setup a vue.js + vue-cli + typescript + vuetify project to run with IE 11 without success?
我在网上发现了很多帖子，这些帖子解释了应该怎么做但没有成功.我试图以几乎所有可能的方式组合下面说明的设置，但均未成功，endind出现许多不同的错误，直到空白页
I found many posts on the net that explain how it should be done but without success. I tried to combine in almost all the ways possible the setup explained below without success, endind with many different errors up to a blank page
该应用程序可以在Chrome或FF上正常运行
The application runs fine wit Chrome or FF
如果有人在IE 11中运行了这样的应用程序，将不胜感激
上下文(所有最新版本):
- vue-cli
- 打字稿
- vue.js + vue-router + vuex + vuex-persistedstate
- vuetify + vue-i18n + vuelidate
- axios
如果我对Babel/webpack开发人员是个新手，请问我是否有些愚蠢的问题.
Pardon me if some question seems stupid as I'm quite a newbie on babel/webpack dev..
我尝试过的问题和问题: (以下我已经尝试了几乎所有组合)
What I've tried and questions : (i've tried almost all the combinations the following)
- 我应该按照此处IE 11的vuetify设置中所述使用
npm install babel-polyfill --save? - 我是否应该按照为IE设置vuetify的说明，在
main.ts中添加import 'babel-polyfill'这里11点? - 或者我应该在
main.ts - 我应该按照此处IE 11的vuetify设置中的说明使用
npm install @babel/preset-env --save-dev还是由于使用了vue-cli是不必要的? -
in
babel.config.js中，我应该替换最初由vue-cli创建的内容
- Should I use
npm install babel-polyfill --saveas explained in the vuetify setup for IE 11 here? - Should I add
import 'babel-polyfill'inmain.tsas explained in the vuetify setup for IE 11 here? - Or should I add
import '@babel/polyfill'inmain.tsas explained here - Should I use
npm install @babel/preset-env --save-devas explained in the vuetify setup for IE 11 here or is it unnecessary due tovue-clibeing used? in
babel.config.js, should I replace the content initially created by vue-cli
presets: [
'@vue/app'
]
由解释
presets: ['@babel/preset-env']
还是(在很多地方都可以看到)?
or (as seen in many places)?
presets: [['@vue/app', useBuiltIns: 'entry' }]]
还是添加2个预设?
presets: [
['@babel/preset-env'],
['@vue/app', useBuiltIns: 'entry' }]
]
Should I add some plugins like explained here?
presets: ['@vue/app'],
plugins: ['@babel/transform-modules-commonjs']
还是按如此处的vue文档所述进行更改?
Or change it like this as explained in the vue doc here?
presets: [
['@vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
在vue.config.js中，我应该添加吗?
invue.config.js, should I add?
transpileDependencies: [
'vuetify',
'vue-i18n',
'vuelidate',
'axios'
]
[解决方案2019-06-25]
我们终于成功了，@ blackening的回答非常有帮助
也发生了我们在google 11中在IE 11中出现了Javsacript错误，并在以下设置后消失了:
[SOLUTION 2019-06-25]
We finally got it to work, the answer from @blackening was very helpful
It happened also that we had javsacript errors in IE 11 with google"reCaptcha"that disappeared after the following setup:
先决条件是安装vue-cli并通过选择在TypeScript旁使用Babel进行自动检测的polyfills"来创建项目
As a prerequisite,vue-cliis installed and the project is created by selecting`'Use Babel alongside TypeScript for auto-detected polyfills'
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作斗争，但这是一个已知的故事...作为一个nexample，在vue中，仅将样式应用于IE，只需像这样编码
And that's it !
Now we are fighting with IE 11 CSS, but that's a know story... As a nexample, invue to apply a style only to IE, just code it like this
<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中.
1) @vue/app and babel presets are included in vue-cli.
https://cli.vuejs.org/guide/browser-compatibility .html#polyfills
这在vue-cli文档中有明确说明.但它也指定:
This is stated clearly in the vue-cli documentation. But it also specifies:
如果您的依赖项之一需要填充，您可以选择以下几种方式:
"If one of your dependencies need polyfills, you have a few options:
如果依赖项是在目标环境不支持的ES版本中编写的:将该依赖项添加到vue.config.js中的transpileDependencies选项中"
If the dependency is written in an ES version that your target environments do not support: Add that dependency to the transpileDependencies option in vue.config.js"
2)您仍然需要将babel polyfill放入每个条目文件中.
2) You still need to put the babel polyfill in each entry file.
传统上:import '@babel/polyfill'在您的main.ts中.
Traditionally: import '@babel/polyfill' in your main.ts.
babel-preset-env的作用是检测到您的浏览器列表，然后用它认为必要的任何polyfill替换该行.
What babel-preset-env does is that it detects your browserlist then replaces that line with whatever polyfills it deems necessary.
3)不推荐使用@ babel/polyfill.谁知道.
3) @babel/polyfill is deprecated. Who knew.
有些人需要额外的重型填充料.那是我.因为office-js +中的Internet爆炸物太习惯了尖端技术.那就是core-js @ 3出现的地方.
Some people need extra heavy duty polyfills. That's me. Because internet exploder in office-js + being too used to bleeding edge tech. That's where core-js @ 3 comes in.
我的webpack构建是完全自定义的.但是我将其从vue-cli中剥离出来，然后从那里进行了修改.
My webpack build is fully custom for that purpose. But i ripped it out of the vue-cli and modified from there.
我的babel loader配置:
My babel loader config :
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 },
}],
],
},
};
这是我的输入文件的顶部:
This is the top of my entry file:
import Vue from 'vue';
import App from './App.vue';
// ------------ Polyfill ------------
import 'core-js/stable';
core-js替换了@ babel/polyfill.
The core-js replaces @babel/polyfill.
More reading on core-js: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md
这篇关于如何使用vuetify项目设置vue-cli以与IE 11一起运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
