Vuetify / Lib Polyfilling для IE11 не работает - SCRIPT1002: синтаксическая ошибка

Question

Я пытаюсь сослаться на vuetify/lib с обычным import Vuetify from "vuetify/lib", но когда я это делаю, приложение задыхается в IE11 с SCRIPT1003: Expected ':'.

Если я изменю ссылку на import Vuetify from "vuetify" - без части /lib - ошибка не выдастся.

Обратите внимание, что я на самом деле не использую vuetify где-либо еще. У меня нет ни одного компонента Vuetify или вызова;Я просто добавляю библиотеку.

Теперь, когда якобы получил vuetify и успешно проанализировал IE11, я хотел бы использовать некоторые компоненты. Если я добавлю любые vuetify компоненты в мой шаблон, IE11 выдаст сообщение Script1002: Syntax Error.

У кого-нибудь есть предложение, чтобы это на самом деле работало?

Index.cshtml

<v-app>
  <div id="reportApp"></div>
</v-app>

Точка входа

// polyfills
import "core-js/stable";
import "regenerator-runtime/runtime";

import Vue from "vue"
import "@mdi/font/css/materialdesignicons.css"
import reportFilter from "./reportFilter.vue"

const options = {
    el: "#reportApp",
    render: h => h(reportFilter)
};

export default new Vue(options);

reportFilter.vue

<template>
    <div>
      <!-- this will throw a syntax error -->
      <v-progress-circular indeterminate color="primary"
      ></v-progress-circular>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: 'report-filter',
        data: function(){
            return {
                dataTypeList: [
                    { value: "1", text: "one" },
                    { value: "2", text: "two" },
                    { value: "3", text: "three" }
                ]
            }
        },
    }

</script>

webpack.config.js

const path = require("path");
const fs = require("fs");
const { VueLoaderPlugin } = require("vue-loader");
const VuetifyLoaderPlugin = require("vuetify-loader/lib/plugin");

module.exports = {
    entry: jsEntries,  // setting jsEntries removed for clarity
    mode: "development",
    module: {
        rules: [
            // other rules for css/sass/etc removed for clarity
            /*javascript*/{
                test: /\.m?js$/,
                exclude: [
                    /node_modules/,
                    /bower_components/
                ],
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "targets": {
                                        "browsers": [
                                            "last 2 versions",
                                            "ie >= 11"
                                        ]
                                    },
                                    "corejs": "3",
                                    "useBuiltIns": "entry"
                                }
                            ]
                        ]
                    }
                }
            },
            /*vue*/{
                test: /\.vue$/i,
                use: "vue-loader"
            }
        ]
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "./wwwroot/dist/js/"),
        publicPath: "/wwwroot/dist/js/"
    },
    plugins: [
        new VueLoaderPlugin(),
        new VuetifyLoaderPlugin()
    ],
    resolve: {
        alias: {
            vue: "vue/dist/vue.js"
        }
    }
};

Answer 1

На моей стороне SCRIPT1002: Syntax Error было решено путем обновления webpack-dev-server.

Попробуйте изменить webpack-dev-server версию на 3.8.2 и удалить node_modules и npm install снова.

Еще один.

// .babelrc

{
  "presets": ["@babel/preset-env"]
}

// babel.config.js

module.exports = {
  presets: ['@babel/preset-env']
}

Установить vuetify можно тремя способами:

установка по умолчанию

Первый (и рекомендуемый) способ - использовать vuetify-loader или то, что мы называем автоматическим A-la-carte. Это гарантирует, что ваше приложение будет использовать только те функции и стили, которые необходимы в Vuetify, значительно уменьшая размер скомпилированного приложения и настройку, которую вы увидите в новом проекте vue-cli-3. Помните, что при импорте из vuetify / lib необходимые стили автоматически импортируются для вас.

установка vue-cli a-la-carte

Вы также можете вручную импортировать отдельные компоненты без использования загрузчика vuetify. Это считается ручной A-la-Carte.

(И о вашем сделано: import Vuetify from 'vuetify')

vue-cli полная установка

Последний метод импортирует и настраивает все функции и стили Vuetify. Как указано выше, все еще рекомендуется , чтобы вы использовали vuetify-loader , если это вообще возможно. Для этой установки вам нужно будет вручную импортировать стили Vuetify. Это также процесс, используемый при начальной загрузке Vuetify через браузер, в отличие от компиляции.

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Удачи.

Answer 2

Пользователи на форумах Vuejs, имеющие аналогичную проблему, сообщили об успешном использовании babel для полифилла для этой конкретной проблемы.

Я предлагаю установить polyfill babel, импортировать его в ваш app.js и настроить babel.config.js, как показано здесь

Если вы собираетесьДля активного использования Vuetify вы также должны иметь Vue.use (Vuetify) до объявления вашего приложения опций, иначе Vue не будет знать, что ему нужно использовать этот пакет.