Vuetify/Lib IE11 的 Polyfilling 不工作 - SCRIPT1002：语法错误

Question

我试图用通常的 import Vuetify from "vuetify/lib" 引用 vuetify/lib，但是当我这样做时，应用程序在 IE11 中因 SCRIPT1003: Expected ':' 而阻塞。

如果我更改对 import Vuetify from "vuetify" 的引用 - 没有 /lib 部分 - 它不会引发错误。

请注意，我实际上还没有在任何地方使用 vuetify。我没有一个 Vuetify 组件或调用；我只是添加库。

现在我表面上已经包含了 vuetify 并被 IE11 愉快地解析了，我想使用一些组件。如果我在我的模板中放置 any 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

Vuejs 论坛中有类似问题的用户报告成功使用 babel 来填充这个特定问题。

我的建议是安装 babel polyfill，将其导入 app.js 并配置 babel.config.js 如图所示 here

如果您打算积极使用 Vuetify，您还应该在声明您的选项应用程序之前拥有 Vue.use(Vuetify)，否则 Vue 将不知道它需要使用该包。

Answer 2

我这边 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']
}

You can install vuetify in three ways:

default installation

The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application's compiled size and is setup you will see in a new vue-cli-3 project. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.

vue-cli a-la-carte installation

You can also manually import individual components without the need for the vuetify-loader. This is considered manual A-la-carte.

(And about your done: import Vuetify from 'vuetify')

vue-cli full installation

The last method will import and setup all of Vuetify's features and styles. As stated above, it is still recommended that you utilize the vuetify-loader if at all possible. For this install, you will need to manually import the Vuetify styles. This is also the process used when bootstrapping Vuetify through a browser as opposed to compiling.

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 3

对于使用 Vue CLI 的人。 IE 11 中 polyfill 的此类问题可以通过将 npm 包名称（导致语法错误的包）添加到 vue.config.js 中的 transpileDependencies 部分来解决，如 https://cli.vuejs.org/guide/browser-compatibility.html#browserslist

中所述

在我的例子中是 3 个包，现在我的配置如下：

    transpileDependencies: [
    'vuetify',
    'query-string',
    'strict-uri-encode',
    'split-on-first'
  ],

导致您将在浏览器控制台中找到的错误的程序包名称。转到错误详细信息，您应该在导致错误的代码行附近找到包名称。

Vuetify/Lib IE11 的 Polyfilling 不工作 - SCRIPT1002：语法错误

Vuetify/Lib Polyfilling for IE11 isn't working - SCRIPT1002: Syntax Error

asp.net-core

.net-core

vuetify.js

asp.net-core-mvc-2.0

babel-polyfill