web-dev-qa-db-ja.com

IE11のVuetify / Libポリフィリングが機能しない-SCRIPT1002：構文エラー

vuetify/libを通常のimport Vuetify from "vuetify/lib"で参照しようとしていますが、そうすると、アプリケーションがIE11でSCRIPT1003: Expected ':'を使用してチョークします。

import Vuetify from "vuetify"への参照を変更した場合-/lib部分がない場合-エラーはスローされません。

私は実際にはまだusingをvuetifyしていないことに注意してください。私は単一のVuetifyコンポーネントまたは呼び出しを持っていません。ライブラリを追加しています。

見かけ上、vuetifyをインクルードし、IE11で楽しく解析したので、いくつかのコンポーネントを使用したいと思います。テンプレートにanyvuetifyコンポーネントを配置すると、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"
        }
    }
};
asp.net-core.net-corevuetify.jsasp.net-core-mvc-2.0babel-polyfill
5
Scott Baker

同様の問題を抱えているVuejsフォーラムのユーザーは、この特定の問題について、バベルを使用してポリフィルを行うことに成功したと報告しています。

私の提案は、babelポリフィルをインストールしてapp.jsにインポートし、図のようにbabel.config.jsを構成することです here

Vuetifyを積極的に使用する場合は、オプションアプリの宣言の前にVue.use（Vuetify）も必要です。そうでない場合、Vueは、そのパッケージを使用する必要があることを認識しません。

0
Aurelia W

私の側に 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は3つの方法でインストールできます。

デフォルトのインストール

最初の（そして推奨される）方法は、vuetify-loaderまたは自動アラカルトと呼ばれるものを利用することです。これにより、アプリケーションは必要なVuetifyの機能とスタイルのみを使用するようになり、アプリケーションのコンパイルサイズが大幅に削減され、新しいvue-cli-3プロジェクトで表示されるセットアップになります。 vuetify/libからインポートする場合、必要なスタイルが自動的にインポートされることに注意してください。

vue-cli a-la-carte installation

Vuetify-loaderを使用せずに、個々のコンポーネントを手動でインポートすることもできます。これは手動のアラカルトと見なされます。

（そしてあなたの完了について：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)

幸運を。

1
Amir Christian