Question

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

我一直在跟踪各种示例，但是github都给出了答案，但无济于事。我之所以来这里，是因为我已经用尽了当前解决问题和使用Google搜索的功能：）

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

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

我在本地进行了测试，发现没有发生此类错误。您无需将其添加到运输中。

您输入的是错误的vue画廊。 Vue.use用于vue插件，而VueGallery只是一个组件，而不是插件。因此，您的代码应如下所示：

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

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

并且您可以看到您不需要检查浏览器，因为您已经在nuxt config中为此插件设置了ssr：false。

实施vue-gallery（vue的Blueimp画廊）后，无效或意外的令牌-Vue.js

1 个答案: