0

我尝试将此包导入我的 nuxt 项目。我所有的编码实验都可以在这里找到。我会参考不同的分支。

有几种方法可以做到这一点：

  1. 只需在此处的页面中直接导入它（主分支）

这种方法效果很好。您可以通过主页上的按钮进入上传页面。

主页示例

直到您手动刷新页面刷新页面

然后你会得到这个错误SyntaxError Cannot use import statement outside a module

错误信息

当您尝试构建它时会发生相同的错误。

  1. 通过插件导入它（比如在插件使用分支中，在构建中有或没有供应商选项）

我有同样的错误。

  1. 通过带有一些选项的插件导入它（例如在插件选项分支中）

然后，仅当您刷新页面并且仅在开发模式下才加载包。

如果您将转到主页上的那个按钮（之前引用过） - 将会有一个空白页面。

  1. 通过模块导入它（如在模块分支中）。

然后nuxt根本无法加载，出现这个错误SyntaxError: Invalid or unexpected token

您能否评论每种方法以及为什么它不起作用？如何正确导入？

4

2 回答 2

3

最终答案如下（我查看了使用此包的项目）。

被使用

有一个在 Nuxt 上运行的项目。

这些是您应该添加到@tamzid-oronno 的答案的更改

//vue-upload-multiple-image.js

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
import VueUploadMultipleImage from 'vue-upload-multiple-image'

Vue.use(VueLazyload) // this is from the package installation guide
Vue.component('VueUploadMultipleImage', VueUploadMultipleImage)

并以同样的方式在插件中列出。

//nuxt.config.js
plugins: [ 
      { src: '~plugins/vue-upload-multiple-image', ssr: false }
]

因此，您将能够使用该包，而无需将其作为标签导入页面。这是在plugin_plus_lazy分支中实现的。

这两个标签都适用于 vue-upload-multiple-image 和 VueUploadMultipleImage。

//your-index-file.vue
<template>
  <div id="my-strictly-unique-vue-upload-multiple-image" style="display: flex; justify-content: center;">
    <vue-upload-multiple-image
      @upload-success="uploadImageSuccess"
      @before-remove="beforeRemove"
      @edit-image="editImage"
      :data-images="images"
      idUpload="myIdUpload"
      editUpload="myIdEdit"
      dragText = "Drag an image here"
      browseText = "(or click here to browse)"
      primaryText = "Default Image"
      markIsPrimaryText = "Set as default image"
      popupText = "This image will be set as default"
      dropText = "Drag and drop"
      accept = image/jpeg,image/png,image/jpg,image/tif,image/tiff
    ></vue-upload-multiple-image>
  </div>
</template>

<script>

export default {
  name: "AppUpload",
  data(){
    return{
      file:"",
      images: []
    }
  },
  methods:{

    uploadImageSuccess(formData, index, fileList) {    },
    beforeRemove (index, done, fileList) {    },
    editImage (formData, index, fileList) {   },
  }
}
</script>

<style scoped>

</style>

要创建静态版本并在本地计算机上对其进行测试，请执行以下操作：

$ npm run generate
# test the project
$ npm install http-server
$ cd dist
$ http-server -p 3000

我还有一个问题 - 为什么它有效？:)

于 2020-10-02T04:49:41.560 回答
1

将其用作插件。

  1. 在 plugins 文件夹中，创建一个名为 vue-upload-multiple-image.js 的文件

    //vue-upload-multiple-image.js

import Vue from 'vue'
import {VueUploadMultiple} from 'vue-upload-multiple-image'
Vue.use(VueUploadMultiple)

  2. 在 nuxt.config.js 上的 plugins 块下列出它

    //nuxt.config.js

plugins: [ 
      { src: '~plugins/vue-upload-multiple-image', ssr: false }
]

因此，您将能够在项目的任何组件上使用该包

于 2020-10-01T15:43:59.820 回答