My application doesn't work in IE11, in Chrome in FF works correctly. In IE11 it is displayed blank page. Result from IE debugger is below. Tried to solve it so many ways like by this. It's look like problem with polyfilling of vuetify but I'm not sure. Do you have any suggestions?
vue cli 3.8.2
build npx vue-cli-service build --mode development --modern
result from debugger: SCRIPT1003: Expected ':'
val("webpack_require.r(webpack_exports);\n/* harmony import / var _src_components_VApp_VApp_sass__WEBPACK_IMPORTED_MODULE_0__ = webpack_require(/! ../../../src/components/VApp/VApp.sass / \"./node_modules/vuetify/src/components/VApp/VApp.sass\");\n/ harmony import / var _src_components_VApp_VApp_sass__WEBPACK_IMPORTED_MODULE_0___default = /#PURE/webpack_require.n(_src_components_VApp_VApp_sass__WEBPACK_IMPORTED_MODULE_0__);\n/ harmony import / var _mixins_themeable__WEBPACK_IMPORTED_MODULE_1__ = webpack_require(/! ../../mixins/themeable / \"./node_modules/vuetify/lib/mixins/themeable/index.js\");\n/ harmony import / var _util_mixins__WEBPACK_IMPORTED_MODULE_2__ = webpack_require(/! ../../util/mixins / \"./node_modules/vuetify/lib/util/mixins.js\");\n// Styles\n // Mixins\n\n // Utilities\n\n\n/ @vue/component /\n\n/ harmony default export */ webpack_exports[\"default\"] = (Object(_util_mixins__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_mixins_themeable__WEBPACK_IMPORTED_MODULE_1__[\"default\"]).extend({\n name: 'v-app',\n props: {\n dark: {\n type: Boolean,\n default: undefined\n },\n id: {\n type: String,\n default: 'app'\n },\n light: {\n type: Boolean,\n default: undefined\n }\n },\n computed: {\n isDark() {\n return this.$vuetify.theme.dark;\n }\n\n },\n\n beforeCreate() {\n if (!this.$vuetify || this.$vuetify === this.$root) {\n throw new Error('Vuetify is not properly initialized, see https://vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object');\n }\n },\n\n render(h) {\n const wrapper = h('div', {\n staticClass: 'v-application--wrap'\n }, this.$slots.default);\n return h('div', {\n staticClass: 'v-application',\n class: {\n 'v-application--is-rtl': this.$vuetify.rtl,\n 'v-application--is-ltr': !this.$vuetify.rtl,\n ...this.themeClasses\n },\n attrs: {\n 'data-app': true\n },\n domProps: {\n id: this.id\n }\n }, [wrap
webpack.config.js
module.exports = {
resolve: {
alias: {
"@": require("path").resolve(__dirname, "src") // change this to your folder path
}
},
publicPath: "/dms-gui/",
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}]
},
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader@^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader@^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
]
};
vue.config.js
const path = require('path');
module.exports = {
transpileDependencies: ['vue-router', 'vuetify', 'axios'],
...
}
babel.config.js
module.exports = {
presets: [
['@vue/app', { useBuiltIns: 'entry' }]
]
}
main.js
import 'core-js/stable'
import Vue from "vue";
import Vuetify from "vuetify/lib";
import App from "./App.vue";
import router from "./router";
import store from "./store/store";
import VueCookies from "vue-cookies";
import AsyncComputed from 'vue-async-computed'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import 'vuetify/dist/vuetify.css';
import { BNav, BNavItemDropdown, BDropdownItem, BNavItem } from 'bootstrap-vue'
import vuetify from '@/plugins/vuetify'
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import '@fortawesome/fontawesome-free/css/all.css'
Vue.use(VueCookies)
Vue.use(Vuetify)
Vue.use(AsyncComputed)
Vue.component('b-nav', BNav)
Vue.component('b-nav-item-dropdown', BNavItemDropdown)
Vue.component('b-dropdown-item', BDropdownItem)
Vue.component('b-nav-item', BNavItem)
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: function(h) {
return h(App);
}
}).$mount("#app");
Vue.use(Vuetify, {
iconfont: 'md'
})