cli3解决 ie11语法错误 vue_VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

在Vue CLI 3中，要想支持IE11，需要进行一些配置。

首先，安装 `@vue/cli-plugin-babel` 和 `@vue/cli-plugin-polyfill` 插件：

npm install @vue/cli-plugin-babel @vue/cli-plugin-polyfill -D

然后，在 `babel.config.js` 文件中添加对IE11的支持：

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        targets: {
          ie: 11
        }
      }
    ]
  ]
}

最后，在 `vue.config.js` 文件中添加 polyfill：

module.exports = {
  configureWebpack: {
    // 添加 polyfill
    entry: ['babel-polyfill', './src/main.js']
  },
  transpileDependencies: [
    // 支持IE11的第三方库
    'resize-detector'
  ]
}

重新打包后，在IE11中应该就可以正常显示了。如果还有报错，可以检查是否有其他语法错误。

相关问题

vue2项目解决ie11浏览器报错语法错误

对于 Vue2 项目在 IE11 浏览器中出现语法错误的问题，可以尝试以下解决方案：

1. 安装并配置 Babel：Vue2 默认不支持 IE11，需要通过 Babel 来进行转译。可以安装 `@babel/preset-env` 和 `@babel/plugin-transform-runtime` 插件，并在项目的 `.babelrc` 文件中配置如下：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": 3
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

2. 添加 Polyfill：在 Vue2 项目中，需要手动引入一些 Polyfill 支持。可以在项目的入口文件（如 `main.js`）中添加以下代码：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

这样可以引入一些 ES6+ 的特性和运行时环境的 Polyfill。

3. 配置 Vue CLI：如果你是通过 Vue CLI 创建的项目，可以在项目根目录下的 `vue.config.js` 文件中添加如下配置：

module.exports = {
  transpileDependencies: [
    'vue'
  ]
};

这样可以确保只有 Vue 文件被转译。

4. 检查语法错误：如果以上步骤都没有解决问题，可能是代码中存在 ES6+ 的语法，在 IE11 中不被支持。可以使用工具（如 Babel Parser 或 ESLint）来检查代码中的语法错误，并进行修复。

希望以上方法能够解决你在 Vue2 项目中遇到的 IE11 浏览器报错语法错误问题。如果还有其他问题，请提供更多详细信息，以便我能够给出更准确的解决方案。

vue 项目再 ie11 报错SCRIPT5022: SecurityError

在ie11中，可能会遇到由于一些安全限制而导致的SCRIPT5022: SecurityError错误。这通常是由于CORS（跨域资源共享）策略引起的，因为IE11对CORS有一些限制。

要解决此问题，请按以下步骤操作：

1. 确保所有请求使用的协议（http或https）与当前页面协议相同。

2. 如果您正在使用axios进行ajax请求，请确保将withCredentials设置为true，这将允许IE11在跨域请求中发送cookie：

axios.defaults.withCredentials = true;

3. 如果您使用的是Vue Cli 3，您可以在vue.config.js文件中配置devServer选项来启用IE11支持：

module.exports = {
  configureWebpack: config => {
    config.entry = ['babel-polyfill', './src/main.js'];
  },
  devServer: {
    disableHostCheck: true
  }
}

4. 如果您正在使用webpack-dev-server，请添加以下选项：

devServer: {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
    "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
  }
}

以上是常见的解决方法，希望对你有所帮助。