VUE CLI-3 项目不适用于 IE-11
VUE CLI-3 Project not working on IE-11
我使用 vue-cli3 在 vuejs 中创建了一个项目。它在 chrome 浏览器上工作正常,但在 IE-11 版本中显示空白屏幕,并在控制台中显示以下错误,如本 link 中所述:https://drive.google.com/file/d/1QaNwK1ekI2BwFsFyjvgbSsvwHBCmlcAD/view?usp=drivesdk
单击我在上面的屏幕截图中指出的控制台错误时,它会打开一个屏幕,显示在给定 link https://drive.google.com/file/d/1_QXVjcw3cmqeC70LfNyLcr__rnXVIZIh/view?usp=drivesdk 中,并在 mini-toastr 包中显示错误:
这是我的 babel.config.js 文件代码:
module.exports = {
presets: [
['@vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
}
和 .browserslistrc 文件代码:
> 1%
last 2 versions
not ie <= 8
我没明白我哪里做错了。我有什么想念的吗?如果有人需要更多信息,请告诉我。谢谢!
我终于解决了上述问题。要在 IE-11 版本上 运行 项目,只需执行 2 个步骤:
- 使用命令 "npm install --save babel-polyfill".
安装 babel-polyfill
- 在您的 main.js 或 index.js 文件中导入 babel-polyfill,位于所有导入包的顶部。例如,这是您的 main.js 文件。
注意:如果你在最后导入babel-polyfill是不行的。
import 'babel-polyfill'
import Vue from 'vue'
import Vuetify from 'vuetify'
import router from './router'
// include script file
import './lib/DemoScript'
// include all css files
import './lib/DemoCss'
Vue.use(Vuetify)
new Vue({
store,
router,
render: h => h(App),
components: { App }
}).$mount('#app')
另一种解决方案:利用 vue-cli-3 的强大功能来利用浏览器支持:https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode
构建时只需一个选项,选择要支持的浏览器列表后就大功告成:-)
这应该适用于构建应用程序。
我使用 vue-cli3 在 vuejs 中创建了一个项目。它在 chrome 浏览器上工作正常,但在 IE-11 版本中显示空白屏幕,并在控制台中显示以下错误,如本 link 中所述:https://drive.google.com/file/d/1QaNwK1ekI2BwFsFyjvgbSsvwHBCmlcAD/view?usp=drivesdk 单击我在上面的屏幕截图中指出的控制台错误时,它会打开一个屏幕,显示在给定 link https://drive.google.com/file/d/1_QXVjcw3cmqeC70LfNyLcr__rnXVIZIh/view?usp=drivesdk 中,并在 mini-toastr 包中显示错误: 这是我的 babel.config.js 文件代码:
module.exports = {
presets: [
['@vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
}
和 .browserslistrc 文件代码:
> 1%
last 2 versions
not ie <= 8
我没明白我哪里做错了。我有什么想念的吗?如果有人需要更多信息,请告诉我。谢谢!
我终于解决了上述问题。要在 IE-11 版本上 运行 项目,只需执行 2 个步骤:
- 使用命令 "npm install --save babel-polyfill". 安装 babel-polyfill
- 在您的 main.js 或 index.js 文件中导入 babel-polyfill,位于所有导入包的顶部。例如,这是您的 main.js 文件。
注意:如果你在最后导入babel-polyfill是不行的。
import 'babel-polyfill'
import Vue from 'vue'
import Vuetify from 'vuetify'
import router from './router'
// include script file
import './lib/DemoScript'
// include all css files
import './lib/DemoCss'
Vue.use(Vuetify)
new Vue({
store,
router,
render: h => h(App),
components: { App }
}).$mount('#app')
另一种解决方案:利用 vue-cli-3 的强大功能来利用浏览器支持:https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode
构建时只需一个选项,选择要支持的浏览器列表后就大功告成:-)
这应该适用于构建应用程序。