Vue.js 网站在 Internet Explorer 11 中为空白
Vue.js website is blank in Internet Explorer 11
Package.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/ 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
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 运行 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 中获取我的网站 运行ning。
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 中收到以下错误：
npm.escape-string-regexp.js (11,1)
在 npm 运行 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);
可能是您的某些依赖使用了 ES6 语法。
By default babel-loader ignores all files inside node_modules. If you want to explicitly transpile a dependency with Babel, you can list it in this option
您需要找出它是哪一个并将其添加到 transpileDependencies - vue.config.js
另外 错误消息很奇怪 - function(e){let{existsSync:r,readFileSync:i} - existsSync 和 readFileSync 看起来都像节点 API。所以检查你没有为浏览器应用程序使用任何 Node 包（例如 node-fetch 绝对是 Node only lib 并且不会在浏览器中工作）
谢谢大家。我的问题解决了。 Internet Explorer 的问题是 “sanitize-html”: “^2.3.2” 和 “emoji-picker”: “^2.3.1” 。两个依赖项都不兼容 IE 11。解决方案：构建 2 个版本：1 个用于 IE，1 个用于 Chrome、Firefox 和 Edge 等现代浏览器。
Package.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/ 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
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 运行 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 中获取我的网站 运行ning。
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 中收到以下错误：
npm.escape-string-regexp.js (11,1)
在 npm 运行 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);
可能是您的某些依赖使用了 ES6 语法。
By default
babel-loaderignores all files insidenode_modules. If you want to explicitly transpile a dependency with Babel, you can list it in this option
您需要找出它是哪一个并将其添加到 transpileDependencies - vue.config.js
另外 错误消息很奇怪 - function(e){let{existsSync:r,readFileSync:i} - existsSync 和 readFileSync 看起来都像节点 API。所以检查你没有为浏览器应用程序使用任何 Node 包（例如 node-fetch 绝对是 Node only lib 并且不会在浏览器中工作）
谢谢大家。我的问题解决了。 Internet Explorer 的问题是 “sanitize-html”: “^2.3.2” 和 “emoji-picker”: “^2.3.1” 。两个依赖项都不兼容 IE 11。解决方案：构建 2 个版本：1 个用于 IE，1 个用于 Chrome、Firefox 和 Edge 等现代浏览器。