javascript - Vue-GTM错误: You may need an appropriate loader to handle this file type

Question

我正在使用@gtm-support/vue2-gtm" :我的 Vue-2 应用程序之一中的“^1.0.0”，Vue 版本如下:

"vue": "^2.5.2",
"vue-cookies": "^1.5.4",
"vue-i18n": "^8.0.0",
"vue-recaptcha": "^1.1.1",
"vue-router": "^3.0.1",
"vue-scrollto": "^2.17.1",
"vue-session": "^1.0.0",
"vuex": "^3.0.1"

对于 Webpack 和 Vue-Loader :

 "babel-core": "^6.22.1",
  "babel-eslint": "^7.2.3",
  "babel-loader": "^7.1.1",
  "dotenv-webpack": "^4.0.0",
  "vue-loader": "^13.3.0",
  "webpack": "^3.6.0",
  "webpack-bundle-analyzer": "^2.9.0",
  "webpack-dev-server": "^2.9.1",
  "webpack-hot-middleware": "^2.22.3",
  "webpack-merge": "^4.1.0"

现在，当我启动应用程序时，出现以下错误:

ERROR  Failed to compile with 2 errors                                                                                                                                                                                                                                3:45:02 PM

 error  in ./node_modules/@gtm-support/core/lib/utils.js

Module parse failed: Unexpected token (30:8)
You may need an appropriate loader to handle this file type.
|     const queryString = new URLSearchParams({
|         id,
|         ...((_c = config.queryParams) !== null && _c !== void 0 ? _c : {})
|     });
|     script.src = `https://www.googletagmanager.com/gtm.js?${queryString}`;

 @ ./node_modules/@gtm-support/core/lib/index.js 9:14-32
 @ ./node_modules/@gtm-support/vue2-gtm/dist/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8002 webpack/hot/dev-server ./src/main.js

 error  in ./node_modules/@gtm-support/core/lib/gtm-support.js

Module parse failed: Unexpected token (44:12)
You may need an appropriate loader to handle this file type.
|             defer: false,
|             compatibility: false,
|             ...options
|         };
|         // @ts-expect-error: Just remove the id from options

 @ ./node_modules/@gtm-support/core/lib/index.js 7:20-44
 @ ./node_modules/@gtm-support/vue2-gtm/dist/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8002 webpack/hot/dev-server ./src/main.js

在 main.js 文件中。我有以下代码:

import VueGtm from '@gtm-support/vue2-gtm'

Vue.use(VueGtm, {
  id: 'GTM-IDXX',
  defer: false,
  enabled: true,
  debug: true,
  loadScript: true
}) 

我有一个 util.js 文件，其中有跟踪事件的功能:

export default submitGTMEvents = (category, action, label) => {
  if (label === undefined || label === '') label = window.location.href
  const value = Number(store.getters.transactionId)
  Vue.gtm.push({
    event: null,
    category: category,
    action: action,
    label: label,
    value: value
  })
}

我从我的组件中调用这个函数。我在这里使用 1.0.0 版本，因为其他版本也向我显示相同的错误，并且认为早期版本有时会解决该问题。

Answer 1

我在使用 @gtm-support/vue-gtm 时也遇到了同样的问题。

设置vue.config.js对我有用:

module.exports = { transpileDependencies: [ '@gtm-support/core' ] };

相关:IE 11 support