导入vue-image-crop-upload库时,Nuxtjs带来了意外的令牌<

时间:2019-04-21 18:19:26

标签: vue.js webpack ssr nuxt

我正在尝试裁剪图像,然后将其上传到我的NuxtJs应用中的亚马逊。当我导入库vue-image-crop-upload获取意外令牌<时,就会出现问题。或简要说明语法错误

我尝试使用no-ssr,但在实际模块中看起来像是一个问题。

                        // Usage in component
                        <no-ssr>
                            <button class="btn btn-primary upload-picture" @click="toggleShow">Cargar imagen</button>
                            <avatar-upload field="img"
                               @crop-success="cropSuccess"
                               v-model="show"
                               :no-square="true"
                               :width="500"
                                lang-type="en"
                               :height="500"
                               :params="params"
                               :headers="headers"
                               img-format="png"></avatar-upload>
                            <img :src="imgDataUrl">
                        </no-ssr>

import VueImageCropUpload from 'vue-image-crop-upload';


                        // Plugin registered
                        import Vue from 'vue';
                        import myUpload from 'vue-image-crop-upload';

                         Vue.component('avatar', myUpload);
                         // nuxt.config.js
                         plugins: [
                           {src: 'plugins/VueCropper', ssr: false},],
                         vendor: ['jquery', 'bootstrap', 'vue-image-crop-upload'],

我希望它可以在nuxt.js上运行。我尝试在其上进行相同工作的客户端渲染应用程序完美

1 个答案:

答案 0 :(得分:1)

您是否尝试过将软件包添加到nuxt.js Transpile配置中?

nuxt.config.js

  build: {
    transpile: ['vue-image-crop-upload' ]
  }