问题
I spend a few days to setup a vue.js + vue-cli + typescript + vuetify project to run with IE 11 without success?
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
The application runs fine wit Chrome or FF
If someone has such an application running in IE 11 it would be greatly appreciated
Context (all the latest versions):
- vue-cli
- typescript
- vue.js + vue-router + vuex + vuex-persistedstate
- vuetify + vue-i18n + vuelidate
- axios
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)
- 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-clipresets: [ '@vue/app' ]by as explained here
presets: ['@babel/preset-env']or (as seen in many places)?
presets: [['@vue/app', useBuiltIns: 'entry' }]]or add the 2 presets?
presets: [ ['@babel/preset-env'], ['@vue/app', useBuiltIns: 'entry' }] ]Should I add some plugins like explained here?
presets: ['@vue/app'], plugins: ['@babel/transform-modules-commonjs']Or change it like this as explained in the vue doc here?
presets: [ ['@vue/app', { polyfills: [ 'es6.promise', 'es6.symbol' ] }] ]in
vue.config.js, should I add?transpileDependencies: [ 'vuetify', 'vue-i18n', 'vuelidate', 'axios' ]
[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:
As a prerequisite,vue-cliis installed and the project is created by selecting`'Use Babel alongside TypeScript for auto-detected polyfills'
1) installcore-js@3
npm install core-js@3
2) editmain.tslike this:
import 'core-js/stable'
import Vue from 'vue'
import '@/plugins/vuetify'
{...}
3) editbabel.config.js
module.exports = {
presets: [
['@vue/app', { useBuiltIns: 'entry' }]
]
}
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:
I'll do a partial answer.
1) @vue/app and babel presets are included in vue-cli.
https://cli.vuejs.org/guide/browser-compatibility.html#polyfills
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:
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) You still need to put the babel polyfill in each entry file.
Traditionally: import '@babel/polyfill' in your main.ts.
What babel-preset-env does is that it detects your browserlist then replaces that line with whatever polyfills it deems necessary.
3) @babel/polyfill is deprecated. Who knew.
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.
My webpack build is fully custom for that purpose. But i ripped it out of the vue-cli and modified from there.
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';
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
回答2:
npm install --save core-js
Top two lines of main.js:
import "core-js/stable";
import "regenerator-runtime/runtime";
In vue.config.js:
module.exports = {
...,
transpileDependencies: ['vuetify']
}
回答3:
According to this tutorial, after installing the vuetify using the following command:
npm install vuetify --save
Then, import the Vuetify in the main.ts file, like this:
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
Vue.config.productionTip = false;
After that, using this command to install babel-polyfill:
npm install --save babel-polyfill
Then, add the import at the top of the main.ts file, the final code as below:
import 'babel-polyfill';
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
Vue.config.productionTip = false;
new Vue({
store,
render: (h) => h(App),
}).$mount('#app');
Finally, using "npm run serve" command to run the application, it works well in IE 11.
来源：https://stackoverflow.com/questions/56686472/how-to-setup-a-vue-cli-with-vuetify-project-to-run-with-ie-11