用于IE11的Vuetify/Lib填充不起作用- SCRIPT1002:语法错误

Question

我试图用通常的vuetify/lib引用import Vuetify from "vuetify/lib"，但当我引用时，应用程序会在IE11中使用SCRIPT1003: Expected ':'。

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

请注意，我实际上还没有在任何地方使用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

Vuejs论坛上有类似问题的用户报告说，他们成功地使用babel来填充这个特定的问题。

我的建议是安装babel填充，将其导入到您的app.js中，并按照说明的这里配置babel.config.js

如果您要积极使用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']
}

您可以通过以下三种方式安装vuetify： 默认安装 第一种(也是推荐的)方法是使用vuetify加载程序，或者我们称之为自动A-la-carte。这将确保您的应用程序只使用Vuetify中所需的特性和样式，显着地减少了应用程序的编译大小，并在一个新的vue-cli-3项目中进行了设置。请记住，当从vuetify/lib，导入必要的样式时，会自动为您导入样式。 vue-cli a-la点菜安装 您也可以手动导入各个组件，而不需要vuetify加载程序。这被认为是手动点菜。 (关于你的成就：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 3

对于那些使用Vue CLI的人来说。可以通过在transpileDependencies中添加npm包名(导致语法错误的包)来解决IE 11中的这种问题。

在我的例子中，它是3个包，现在我的配置看起来是：

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

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