无效或意外令牌 - Vue.js，在实施 vue-gallery（用于 vue 的 Blueimp Gallery）之后

Question

我正在尝试在我使用 nuxt.js 构建的 vue.js 中实现 vue-gallery。

我遵循了各种示例并 github 发布了答案，但无济于事。我转向这里是因为我已经用尽了我目前解决问题和谷歌搜索的能力:)

==================更新新的错误消息是：

warning in ./plugins/vue-gallery.js

"export 'default' (imported as 'VueGallery') was not found in 'vue-gallery'

我将 nuxt.config.js 更新为如下所示：

  build: {
    /*
    ** add vue-gallery to transpile process
    */
   transpile: ['vue-gallery'],
    /*
    ** Use autoprefixer
    */
   postcss: [
    require('autoprefixer')
   ],
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },

并且我尝试更新 vue-gallery.js 以查看是否可以修复导出默认问题，为此：

从 'vue' 导入 Vue 从 'vue-gallery'

导入 VueGallery

export default function vuegallery() {
  if (process.browser) {
    // VueGallery = require('vue-gallery')
    Vue.use(VueGallery, {name: 'vue-gallery'})
  }
  console.log('plugin vue-gallery is locked and loaded')
}

===================

代码库位于：

https://bitbucket.org/earleymw/front-end-dev-test-1/src/master/ CLI 中的错误是

✖ error /Users/mikeearley/code/front-end-dev-test-1/rogue-challenge/node_modules/blueimp-gallery/css/blueimp-gallery.min.css:1
  (function (exports, require, module, __filename, __dirname) { @charset "UTF-8";.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{position:absolute;top:0;right:0;bottom:0;left:0;-moz-backface-visibility:hidden}.blueimp-gallery>.slides>.slide>.slide-content{margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;opacity:1}.blueimp-gallery{position:fixed;z-index:999999;overflow:hidden;background:#000;background:rgba(0,0,0,.9);opacity:0;display:none;direction:ltr;-ms-touch-action:none;touch-action:none}.blueimp-gallery-carousel{position:relative;z-index:auto;margin:1em auto;padding-bottom:56.25%;box-shadow:0 0 10px #000;-ms-touch-action:pan-y;touch-action:pan-y}.blueimp-gallery-display{display:block;opacity:1}.blueimp-gallery>.slides{position:relative;height:100%;overflow:hidden}.blueimp-gallery-carousel>.slides{position:absolute}.blueimp-gallery>.slides>.slide{position:

  SyntaxError: Invalid or unexpected token

浏览器中的错误是：

SyntaxError
Invalid or unexpected token
module.js
Missing stack framesJS 
Module.require@579:17
vm.js:80:10
createScript
vm.js:139:10
Object.runInThisContext
module.js:599:28
Module._compile
module.js:646:10
Module._extensions..js
module.js:554:32
Module.load
module.js:497:12
tryModuleLoad
module.js:489:3
Module._load
module.js:579:17
Module.require
internal/module.js:11:18
require
module.js:635:30
Module._compile
module.js:646:10
Module._extensions..js
module.js:554:32
Module.load
module.js:497:12
tryModuleLoad
module.js:489:3
Module._load

目前，我有一个“~/plugins/vue-gallery.js”文件，其中包含：

import Vue from 'vue'
import VueGallery from 'vue-gallery'

if (process.browser) {
    // VueGallery = require('vue-gallery')
    Vue.use(VueGallery, {name: 'vue-gallery'})
  }
  console.log('plugin vue-gallery is locked and loaded')

并且在 'nuxt.config.js' 中：

  /*
  ** plugins
  */
  plugins: [{ src: '~/plugins/vue-gallery.js', ssr: false }],

并且在 index.vue 中：

Answer 1

我在本地测试过，没有出现这样的错误。你不需要将它添加到 transpile。

而且你导入 vue gallery 错误。 Vue.use 用于 vue 插件，而 VueGallery 只是一个组件，而不是插件。所以你的代码应该是这样的：

import Vue from 'vue'
import VueGallery from 'vue-gallery'

Vue.component('vue-gallery', VueGallery)

如您所见，您不需要检查浏览器，因为您已经在 nuxt 配置中为此插件设置了 ssr: false。

无效或意外令牌 - Vue.js，在实施 vue-gallery（用于 vue 的 Blueimp Gallery）之后

Invalid or Unexpected Token - Vue.js, after implementing vue-gallery (Blueimp Gallery for vue)

blueimp

vue.js

vuejs2

nuxt.js