使用 feathersjs 时如何使 vuejs 应用程序与 IE 11 一起工作

Posted 2023-03-24

【中文标题】使用 feathersjs 时如何使 vuejs 应用程序与 IE 11 一起工作

【英文标题】：How to make a vuejs application work with IE 11 when using feathersjs

【发布时间】：2018-12-21 13:24:49

【问题描述】：

在创建标准 vue 应用程序（使用 vue-cli v3.0）并包含 @feathersjs/feathers 以实现与羽毛 API 的连接时，我在 Internet Explorer 11 (SCRIPT1010: Expected identifier) 上遇到错误

底线是找到一种简单的方法来解决此类问题，因为在较大的项目中，人们很容易发现很多库问题，有时需要支持至少一个版本的 Internet Explorer（至少从业务角度来看）观点）

我在羽毛网站 (https://docs.feathersjs.com/api/client.html#module-loaders) 上读到该库使用 ES6，因此在这种情况下，它必须被转译才能在像 IE11 这样的浏览器中工作。

所以我尝试了这个，但一点运气都没有：

// vue.config.js
module.exports = 
  baseUrl: '/',
  transpileDependencies: [
    '@feathers/commons',
    '@feathers/errors',
    '@feathers/feathers',
    'debug'
  ]

即使在 chrome 中也出现错误：Uncaught ReferenceError: exports is not defined

我创建了一个项目来显示这个错误：https://github.com/riescorp/vue-internet-explorer

这个应用程序应该可以使用 IE11，即使它运行不快或看起来不错，但可以运行。

【参考方案1】：

我认为该过程应该与遵循 Vuetify 网站上标题为“IE11 和 Safari 9 支持”部分的说明相同（滚动到底部）：https://vuetifyjs.com/en/getting-started/quick-start

我不需要在我的项目中做任何其他事情，我记得。

【讨论】：

我试过了，但没有改变结果。我想答案就在这里：github.com/vuejs/vue-cli/issues/1568 但我真的不明白。我已经尝试了尽可能多的组合，但仍然遇到相同的错误。

【参考方案2】：

我终于设法解决了这个问题。

这就是 babel.config.js 配置的诀窍：

module.exports = 
  presets: ['@vue/app'],
  plugins: ['@babel/transform-modules-commonjs']

我的vue.config.js 中还有一个错字，应该是这样的：

// vue.config.js
module.exports = 
  baseUrl: '/',
  transpileDependencies: [
    '@feathersjs',
    'debug'
  ]

最后，当使用羽毛时，这条线不起作用：

.configure(restClient.fetch(window.fetch))

所以你可以使用import 'whatwg-fetch'来解决它（记得安装它npm i whatwg-fetch）