vue.js - Vue.js 网站在 Internet Explorer 11 中为空白

Question

包.json

{
“name”: “Chatwidget”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”,
“deploy”: “rsync -aczv dist/ [e-mail]:/home/kunden.comspace.de/pages/mememru/”
},
“dependencies”: {
“date-fns”: “^1.30.1”,
“debounce”: “^1.2.0”,
“leaflet”: “^1.4.0”,
“leaflet-defaulticon-compatibility”: “^0.1.1”,
“loglevel”: “^1.6.1”,
“marked”: “^1.1.1”,
“node-fetch”: “^2.3.0”,
“sanitize-html”: “^2.3.2”,
“url-search-params-polyfill”: “^5.1.0”,
“uuid”: “^3.3.2”,
“v-emoji-picker”: “^2.3.1”,
“vue”: “^2.5.21”,
“whatwg-fetch”: “^3.0.0”
},
“devDependencies”: {
“@vue/cli-plugin-babel”: “^3.3.0”,
“@vue/cli-plugin-eslint”: “^3.3.0”,
“@vue/cli-service”: “^4.5.8”,
“babel-eslint”: “^10.0.1”,
“eslint”: “^5.12.0”,
“eslint-plugin-vue”: “^5.1.0”,
“node-sass”: “^4.11.0”,
“sass-loader”: “^7.1.0”,
“vue-template-compiler”: “^2.5.21”
},
“eslintConfig”: {
“root”: true,
“env”: {
“node”: true,
“jquery”: true
},
“extends”: [
“plugin:vue/essential”,
“eslint:recommended”
],
“rules”: {},
“parserOptions”: {
“parser”: “babel-eslint”
}
},
“postcss”: {
“plugins”: {
“autoprefixer”: {}
}
},
“browserslist”: [
“> 1%”,
“last 2 versions”,
“not ie <= 8”
]

babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ]
}

vue.config.js

const conf = {
    publicPath: './',
    css: {
        loaderOptions: {
            // pass options to sass-loader
            sass: {
                // @/ is an alias to src/
                data: `@import "@/global/css/style.scss";`
            }
        }
    },
    configureWebpack: {},
    productionSourceMap: false,
}
if (process.env.NODE_ENV === 'production') {
    conf.filenameHashing = false;
    conf.configureWebpack.optimization = {
        splitChunks: false
    };
}

module.exports = conf;

当我执行npm run serve我得到以下错误

eval("var rng = __webpack_require__(/*! ./lib/rng */ \"./node_modules/uuid/lib/rng-browser.js\");\nvar bytesToUuid = __webpack_require__(/*! ./lib/bytesToUuid */ \"./node_modules/uuid/lib/bytesToUuid.js\");\n\nfunction v4(options, buf, offset) {\n  var i = buf && offset || 0;\n\n  if (typeof(options) == 'string') {\n    buf = options === 'binary' ? new Array(16) : null;\n    options = null;\n  }\n  options = options || {};\n\n  var rnds = options.random || (options.rng || rng)();\n\n  // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`\n  rnds[6] = (rnds[6] & 0x0f) | 0x40;\n  rnds[8] = (rnds[8] & 0x3f) | 0x80;\n\n  // Copy bytes to buffer, if provided\n  if (buf) {\n    for (var ii = 0; ii < 16; ++ii) {\n      buf[i + ii] = rnds[ii];\n    }\n  }\n\n  return buf || bytesToUuid(rnds);\n}\n\nmodule.exports = v4;\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvdXVpZC92NC5qcy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL25vZGVfbW9kdWxlcy91dWlkL3Y0LmpzP2M2NGUiXSwic291cmNlc0NvbnRlbnQiOlsidmFyIHJuZyA9IHJlcXVpcmUoJy4vbGliL3JuZycpO1xudmFyIGJ5dGVzVG9VdWlkID0gcmVxdWlyZSgnLi9saWIvYnl0ZXNUb1V1aWQnKTtcblxuZnVuY3Rpb24gdjQob3B0aW9ucywgYnVmLCBvZmZzZXQpIHtcbiAgdmFyIGkgPSBidWYgJiYgb2Zmc2V0IHx8IDA7XG5cbiAgaWYgKHR5cGVvZihvcHRpb25zKSA9PSAnc3RyaW5nJykge1xuICAgIGJ1ZiA9IG9wdGlvbnMgPT09ICdiaW5hcnknID8gbmV3IEFycmF5KDE2KSA6IG51bGw7XG4gICAgb3B0aW9ucyA9IG51bGw7XG4gIH1cbiAgb3B0aW9ucyA9IG9wdGlvbnMgfHwge307XG5cbiAgdmFyIHJuZHMgPSBvcHRpb25zLnJhbmRvbSB8fCAob3B0aW9ucy5ybmcgfHwgcm5nKSgpO1xuXG4gIC8vIFBlciA0LjQsIHNldCBiaXRzIGZvciB2ZXJzaW9uIGFuZCBgY2xvY2tfc2VxX2hpX2FuZF9yZXNlcnZlZGBcbiAgcm5kc1s2XSA9IChybmRzWzZdICYgMHgwZikgfCAweDQwO1xuICBybmRzWzhdID0gKHJuZHNbOF0gJiAweDNmKSB8IDB4ODA7XG5cbiAgLy8gQ29weSBieXRlcyB0byBidWZmZXIsIGlmIHByb3ZpZGVkXG4gIGlmIChidWYpIHtcbiAgICBmb3IgKHZhciBpaSA9IDA7IGlpIDwgMTY7ICsraWkpIHtcbiAgICAgIGJ1ZltpICsgaWldID0gcm5kc1tpaV07XG4gICAgfVxuICB9XG5cbiAgcmV0dXJuIGJ1ZiB8fCBieXRlc1RvVXVpZChybmRzKTtcbn1cblxubW9kdWxlLmV4cG9ydHMgPSB2NDtcbiJdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTsiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/uuid/v4.js\n");

我在vue.config.js中添加了以下内容 configureWebpack: {} 中的内容用于调试和 transpileDependencies:[] 以将所有依赖项转换为旧的 Ecmascript 语法，以使我的网站在 Internet Explorer 11 中运行。

configureWebpack: {
        optimization: {
      runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 0,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`;
            }
          }
        }
      }
    }
    },
    productionSourceMap: false,
    transpileDependencies: ['date-fns','debounce','leaflet','leaflet-defaulticon-compatibility',
    'loglevel','marked','node-fetch','sanitize-html','url-search-params-polyfill','uuid','v-emoji-picker','vue','whatwg-fetch','escape-string-regexp'
    ],

但不幸的是它没有帮助。

在npm run serve上，我在 Internet Explorer 11 中收到以下错误：

npm.escape-string-regexp.js (11,1)

在npm run build上，如果我在 Internet Explorer 11 中启动 Index.html，则会出现以下错误：

identifier expected: (function(e){let{existsSync:r,readFileSync:i}=n(3),{dirname:o,join:s}=n(“df7c”),a=n(“dc74”);function c(t){return e?e.from(t,“base64”).toString():window.atob(t)}class u

Chatwidget is undefined in Index.html: window.addEventListener(‘DOMContentLoaded’, function(){
Chatwidget.initChatWidget(document.getElementById(‘chatwidget’), ChatwidgetConfig, ChatwidgetUser);

标签： vue.jsinternet-explorer-11

Answer 1