vue.js - Vue 在 IE11 中不起作用（SCRIPT1002：语法错误）

Question

我正在尝试设置 Vue。它在 Chrome 浏览器中有效，但在 IE11 浏览器中无效。

IE11浏览器打印

SCRIPT1002：语法错误 bundle.js (5253, 1)

// bundle.js (5253, 1)
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n/* harmony import */ var vue_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-router */ \"./node_modules/vue-router/dist/vue-router.esm.js\");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\");\n/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _entry_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./entry.vue */ \"./resources/vue/entry.vue\");\n/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../store */ \"./resources/store/index.js\");\n/* harmony import */ var _axios__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../axios */ \"./resources/axios/index.js\");\n/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../common */ \"./resources/common/index.js\");\n\n\n\n\n\n\n // input key event code\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].config.keyCodes = {\n  \"ctrl\": 17,\n  \"arrow-keys\": [37, 38, 39, 40]\n}; // Moment\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].config.$moment = moment__WEBPACK_IMPORTED_MODULE_2___default.a; // Axios\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].prototype.$axios = _axios__WEBPACK_IMPORTED_MODULE_5__[\"default\"]; // CommonUtils\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].prototype.$common = _common__WEBPACK_IMPORTED_MODULE_6__[\"default\"]; // VueRouter\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(vue_router__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\nnew vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n  render: h => h(_entry_vue__WEBPACK_IMPORTED_MODULE_3__[\"default\"]),\n  store: _store__WEBPACK_IMPORTED_MODULE_4__[\"default\"]\n}).$mount(\"#app\");\n\n//# sourceURL=webpack:///./resources/vue/entry.js?");

我安排了这条消息。

eval("
__webpack_require__.r(__webpack_exports__);

/* harmony import */ 
var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");

/* harmony import */ 
var vue_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-router */ \"./node_modules/vue-router/dist/vue-router.esm.js\");

/* harmony import */ 
var _entry_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./entry.vue */ \"./resources/vue/entry.vue\");

/* harmony import */ 
var _store__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../store */ \"./resources/store/index.js\");

/* harmony import */ 
var _axios__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../axios */ \"./resources/axios/index.js\");

/* harmony import */ 
var _common__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../common */ \"./resources/common/index.js\");

// input key event code
vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].config.keyCodes = {
  \"ctrl\": 17,
  \"arrow-keys\": [37, 38, 39, 40]
}; 

// Axios
vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].prototype.$axios = _axios__WEBPACK_IMPORTED_MODULE_4__[\"default\"]; 

// CommonUtils
vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].prototype.$common = _common__WEBPACK_IMPORTED_MODULE_5__[\"default\"]; 

// VueRouter
vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(vue_router__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);

_store__WEBPACK_IMPORTED_MODULE_3__[\"default\"].$app = new vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({

  el: '#page',
  render: h => h(_entry_vue__WEBPACK_IMPORTED_MODULE_2__[\"default\"]),
    store: _store__WEBPACK_IMPORTED_MODULE_3__[\"default\"]\n});

//# sourceURL=webpack:///./resources/vue/entry.js?
");

这是我的 Vue 设置

// package.json
/...
"devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "babel-loader": "^8.0.2",
    "cross-env": "5.2.0",
    "css-loader": "^2.1.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.3",
    "file-loader": "1.1.11",
    "vue-loader": "14.2.4",
    "vue-template-compiler": "2.6.11",
    "vue-template-loader": "^1.0.0",
    "webpack": "4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.8.2"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "moment": "^2.24.0",
    "promise.prototype.finally": "^3.1.2",
    "vue": "^2.6.10",
    "vue-infinite-loading": "^2.4.4",
    "vue-router": "^3.1.3",
    "vuex": "^3.0.1"
  }

// webpack.common.js
let path = require('path');
let glob = require('glob');

module.exports = {
    entry: getEntries(),
    output: {
        path: path.resolve(__dirname, "../web"),
        filename: '[name]/bundle.js'
    },
    resolve: {
        alias: {
            "vue$": "vue/dist/vue.esm.js"
        },
        extensions: ["*", ".js", ".vue", ".json"]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.css/,
                use: ['vue-style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    }
};

function getEntries() {
    let entryPathList = glob.sync('./resources/vue/**/entry.js');
    let entry = {};

    for (let index in entryPathList) {
        let configPath = entryPathList[index];
        let parentPath = configPath.substring(0, configPath.lastIndexOf("/"));

        entry[parentPath] = configPath;
    }

    return entry;
}

// webpack.dev.js
const common = require('./webpack.common.js');

module.exports = Object.assign(common, {
    devServer: {
        noInfo: true,
        port: 9876,
    },
});

// entry.js
import Vue from 'vue';
import VueRouter from "vue-router";
import moment from "moment";
import Page from "./entry.vue";
import store from "../store";
import axios from "../axios";
import common from "../common";

// input key event code
Vue.config.keyCodes = {
    "ctrl": 17,
    "arrow-keys": [37, 38, 39, 40]
};
// Axios
Vue.prototype.$axios = axios;
// CommonUtils
Vue.prototype.$common = common;

// VueRouter
Vue.use(VueRouter);

new Vue({
    render: h => h(Page),
    store
}).$mount("#app");

问题在 Chrome 浏览器中有效，但在 IE11 浏览器中无效。请帮我。(ㅠㅠ)

标签： vue.js