Javascript ReferenceError:在nextjs项目中使用web组件时未定义Vue_Javascript_Vue.js

Javascript ReferenceError:在nextjs项目中使用web组件时未定义Vue

javascript vue.js

Javascript ReferenceError:在nextjs项目中使用web组件时未定义Vue,javascript,vue.js,Javascript,Vue.js,我有一个vuejs web组件，我正试图在我的nextjs项目中使用它，但是我得到了一个错误ReferenceError:Vue未定义我曾尝试将vue直接导入布局文件，在其中导入web组件，并尝试了各种解决方法，但似乎没有任何效果如何正确导入Vue并将web组件使用到我的应用程序中 my test.js <template> <div> <span><strong>Total: </strong>{{total}}<

我有一个vuejs web组件，我正试图在我的nextjs项目中使用它，但是我得到了一个错误

ReferenceError:Vue未定义

我曾尝试将vue直接导入布局文件，在其中导入web组件，并尝试了各种解决方法，但似乎没有任何效果

如何正确导入Vue并将web组件使用到我的应用程序中

my test.js

<template>
  <div>
    <span><strong>Total: </strong>{{total}}</span>
  </div>
</template>
<script>
export default {
  props: {
    num1: Number,
    num2: Number
  },
  computed: {
    total() {
      return parseInt(this.num1) + parseInt(this.num2);
    }
  }
}
</script>

import Vue from 'vue'
window.Vue = Vue

export default Vue

import React, { Component } from 'react';
import './dist/my-test.js'
import Vue from './dist/Vue'
window.Vue = Vue

const Layout = ({ children }) => (
  <div className='layout'>
    <GlobalStyle />
    <Head>
    </Head>
  <Wrap>
    <my-test />
   <Footer />
    </Wrap>
  </div>
)

import Vue from 'vue'
window.Vue = Vue

export default Vue