[英]SCRIPT1003: Expected ':' on IE ~ Vue.js ~ MDBootstrap
I have a simple Vue.js application which works perfectly on other browsers than IE, which shows a blank page with an error SCRIPT1003: Expected ':'
.我有一个简单的 Vue.js 应用程序,它可以在 IE 以外的其他浏览器上完美运行,它显示一个带有错误
SCRIPT1003: Expected ':'
的空白页面。 I have added a vue.config.js
file which looks like that:我添加了一个看起来像这样的
vue.config.js
文件:
module.exports = {
transpileDependencies: ["bootstrap-css-only", "mdbvue"]
};
My .babelrc
file is a default one taken from the official project starting page , this is:我的
.babelrc
文件是从官方项目起始页获取的默认文件,这是:
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}
],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
In my main.js
file I tried 2 approaches:在我的
main.js
文件中,我尝试了 2 种方法:
import "core-js/stable";
import "regenerator-runtime/runtime";
and和
import "@babel/polyfill";
Both didn't change anything and the error and behaviour is the same.两者都没有改变任何东西,错误和行为是相同的。 The only one thing which still comes to my mind to solve this problem is mentioned here , ie in
export default
I'm using the following syntax for component: 这里提到了我仍然想到解决这个问题的唯一一件事,即在
export default
中,我对组件使用以下语法:
components: {
mdbContainer,
mdbRow,
mdbCol,
mdbCard,
mdbCardBody,
mdbInput,
mdbBtn,
mdbIcon,
mdbModalFooter,
mdbView
}
Edit2: But if I'll drop this lines then all my UI elements from MDBootstrap are gone. Edit2:但是如果我删除这些行,那么我所有来自 MDBootstrap 的 UI 元素都将消失。 Is there any other way to use it?
有没有其他方法可以使用它? I wanted simply to use polyfills.
我只想使用 polyfills。
I tried to create babel.config.js
file, but also didn't help.我试图创建
babel.config.js
文件,但也没有帮助。 The logic in this file is like that:这个文件中的逻辑是这样的:
module.exports = {
presets: [["@vue/app", { useBuiltIns: "entry" }]]
};
Is there anything I'm missing?有什么我想念的吗? What I understood the
vue.config.js
file doesn't has to be imported anywhere, because vue.config.js
is an optional config file that will be automatically loaded by @vue/cli-service
.我所理解的
vue.config.js
文件不必在任何地方导入,因为vue.config.js
是一个可选配置文件,将由@vue/cli-service
自动加载。 Here are my questions:以下是我的问题:
babel.config.js
and .babelrc
or only one of these?babel.config.js
和.babelrc
还是只有其中之一?babel.config.js
file automatically detected like vue.config.js
?vue.config.js
一样自动检测到babel.config.js
文件? Vue CLI version: Vue CLI 版本:
$ vue --version
3.11.0
I had a similar issue.我有一个类似的问题。 I recreated the project using
vue-cli 4
and left all the defaults alone.I did not reference babel
or core-js
in my main.js
.我使用
vue-cli 4
重新创建了项目,并保留了所有默认值。我没有在main.js
中引用babel
或core-js
。 I looked at the console error in IE to see which library was causing the script error,( lets call it some-imported-lib
).我查看了 IE 中的控制台错误,以查看导致脚本错误的库(我们称之为
some-imported-lib
)。 Then I added that library in vue.config.js
as follows然后我在
vue.config.js
中添加了该库,如下所示
transpileDependencies:['some-imported-lib']
The problem is that IE11 doesn't support shorthand property notation, but you're using that in your components
list.问题是 IE11 不支持速记属性表示法,但您在
components
列表中使用它。 Your .babelrc
isn't set to ensure that the resulting code can run on IE11.您的
.babelrc
未设置为确保生成的代码可以在 IE11 上运行。
You'll want to review the browserlist documentation to fine-tune your browsers
setting, but for instance adding IE 11
to it will ensure that the transpiled code has all the transforms required to run on IE11.您需要查看浏览器列表文档以微调您的
browsers
设置,但例如将IE 11
添加到其中将确保转译的代码具有在 IE11 上运行所需的所有转换。
Note that IE11 basically doesn't support anything in ES2015+.请注意,IE11 基本上不支持 ES2015+ 中的任何内容。 (It has
const
and a broken version of let
, but that's basically it.) So doing this will effectively transpile all your code to ES5 levels. (它有
const
和let
的损坏版本,但基本上就是这样。)所以这样做会有效地将所有代码转换为 ES5 级别。 You may want to serve different bundles to IE and to other, more modern browsers.您可能希望为 IE 和其他更现代的浏览器提供不同的捆绑包。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.