首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Internet Explorer11中的Vue.js网站为空

Internet Explorer11中的Vue.js网站为空
EN

Stack Overflow用户
提问于 2021-02-22 00:51:48
回答 2查看 600关注 0票数 2

Package.json

代码语言:javascript
复制
{
“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/ kuncom@kunden.comspace.de:/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

代码语言:javascript
复制
module.exports = {
  presets: [
    '@vue/app'
  ]
}

vue.config.js

代码语言:javascript
复制
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运行服务我得到以下错误

代码语言:javascript
复制
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.jsconfigureWebpack:{}中用于调试的东西transpileDependencies:[]中的东西将所有依赖项转换为较旧的Ecmascript语法,以使我的网站在Internet Explorer11中运行。

代码语言:javascript
复制
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运行服务我在Internet Explorer 11中遇到以下错误:

代码语言:javascript
复制
npm.escape-string-regexp.js (11,1)

打开npm运行构建如果在Internet Explorer11中启动Index.html,则会出现以下错误:

代码语言:javascript
复制
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
代码语言:javascript
复制
Chatwidget is undefined in Index.html: window.addEventListener(‘DOMContentLoaded’, function(){
Chatwidget.initChatWidget(document.getElementById(‘chatwidget’), ChatwidgetConfig, ChatwidgetUser);
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-02-24 23:07:37

感谢你们所有人。我的问题解决了。Internet Explorer的问题是“sanitize-html”:“^2.3.2”“emoji-picker”:“^2.3.1”..。这两个依赖项都与IE 11不兼容。解决方案:构建2个版本:1个用于IE,1个用于Chrome、Firefox和Edge等现代浏览器。

票数 1
EN

Stack Overflow用户

发布于 2021-02-22 04:58:04

可能是您的某些依赖项正在使用ES6语法。

默认情况下babel-loader忽略其中的所有文件node_modules..。如果要使用Babel显式转换依赖项,可以将其列在此选项中

transpileDependencies

您需要找出它是哪一个,并将其添加到transpileDependencies-vue.config.js

还有错误消息非常奇怪-

function(e){let{existsSync:r,readFileSync:i}

-两者都有existsSyncreadFileSync看起来像Node API。因此,请检查您没有使用任何Node包作为浏览器应用程序(例如node-fetch绝对是Node唯一的库,不会在浏览器中工作)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66304712

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档