无法通过vuetify项目运行vue-cli并运行IE 11填充问题?

时间:2019-12-18 15:11:23

标签: vue.js vuetify.js vue-cli

我的应用程序无法在IE11中运行,在FF中的Chrome中可以正常工作。 在IE11中显示为空白页。 IE调试器的结果如下。试图解决很多方法 就像this一样。看起来像是vuetify的polyfilling问题,但我不确定。你有什么建议吗?

vue cli 3.8.2

构建 npx vue-cli-service build-模式开发--modern

调试器的结果: SCRIPT1003:预期为“:”

val(“ <​​strong> webpack_require .r( webpack_exports ); \ n / *和声导入 / 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 / 和谐导入 / var _src_components_VApp_VApp_sass__WEBPACK_IMPORTED_MODULE_0___default =/#PURE/webpack_require。n(_src_components_VApp_VApp_sass__ED_MOD_E; / em>和谐导入 / var _mixins_themeable__WEBPACK_IMPORTED_MODULE_1__ = webpack_require (/ !../../mixins/themeable / \“ ./ node_modules / vuetify / lib / mixins / themeable / index.js \“); \ n / 和谐导入 / var _util_mixins__WEBPACK_IMPORTED_MODULE_2__ = webpack_require (/ !../../util/ mixins / \“ ./ node_modules / vuetify / lib / util / mixins.js \”); \ n //样式\ n // Mixins \ n \ n //实用程序\ n \ n \ n / @ vue / component / \ n \ n / 和谐默认导出* / webpack_exports [\“默认\”] =(对象(_util_mixins__WEBPACK_IMPORTED_MODULE_2 __ [\“默认\”]) (_mixins_themeable__WEBPACK_IMPORTED_MODULE_1 __ [\“默认\”])。extend({\ n名称:'v-app',\ n属性:{\ n黑暗:{\ n类型:布尔值,\ n默认值:undefined \ n},\ n id:{\ n类型:字符串,\ n默认值:'app'\ n},\ n灯光:{\ n类型:布尔值,\ n默认值:undefined \ n} \ n},\ n计算得出:{\ n isDark(){\ n返回this。$ vuetify.theme.dark; \ n} \ n \ n},\ n \ n beforeCreate(){\ n if(!this。$ vuetify || this。$ vuetify === this。$ root){\ n抛出新错误('Vuetify没有正确初始化,请参见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返回h('div',{\ n staticClass :'v-application',\ n类:{\ n'v-application--is-rtl':this。$ vuetify.rtl,\ n'v-application--is-ltr':!this。$ vuetify .rtl,\ n ... this.themeClasses \ n},\ n属性:{\ n'data-app':true \ n},\ n domProps:{\ n id:this.id \ n} \ n },[包装

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'
})

0 个答案:

没有答案