如何在新的 Vue3 项目中使用 Vue2 旧组件（.vue 文件）？答案

【问题标题】：How can I use Vue2 old component (.vue file) with a new Vue3 project?如何在新的 Vue3 项目中使用 Vue2 旧组件（.vue 文件）？
【发布时间】：2021-01-15 05:04:22
【问题描述】：

Vue3 版本已经发布，但我没有看到任何在新版本中使用旧组件代码的示例。怎么会？

这是我的 index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue 3 Example using Vue 2 component</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ product }}</h1>    
      <my-old-vue-component :my-prop="'my string in here'"></my-old-vue-component>
    </div>

      <script src="./main.js"></script>
      <script src="./myOldVueComponent.vue"></script>

    <!-- Mount App -->
    <script>
      const mountedApp = app.mount('#app')
    </script>
  </body>
</html>

这是我的 main.js：

const app = Vue.createApp({
  data() {
      return {
          product: 'my product',
      }
  }
})

这是我的旧的简单 Vue2 组件（myOldVueComponent.vue）：

<template>

    <div>
        {{myProp}}
    </div>

</template>

<script>

  
    export default {
        name: "myOldVueComponent",
        props: {
            myProp: { type: String }
        },
        data() {
            return {
               
        },
       
    }

</script>

我在导入“.vue”文件时遇到错误：未捕获的语法错误： 意外的令牌' （意思是我的旧组件中的<template> 标签。

【问题讨论】：

是的，关于带有
.vue 文件在 vue3 上工作得很好，你的问题一定出在其他地方
尝试使用 JS 导入来添加组件，而不是添加脚本标签

标签： vue.js vuejs2 vuejs3

【解决方案1】：

Vue2 组件在 Vue3 中工作。这不是您的代码中的问题。

问题出在这里：

<script src="./myOldVueComponent.vue"></script>

您不能直接在浏览器中导入 .vue 文件。你不能在 vue 1,2 中做到这一点，你还不能在 vue 3 中做到这一点。浏览器无法理解该语法，需要一个捆绑器来转换你的代码是浏览器可以使用的东西。最受欢迎的打包工具是 webpack、rollup ecc ecc

见：https://v3.vuejs.org/guide/single-file-component.html#for-users-new-to-module-build-systems-in-javascript

我强烈建议您使用 Vue cli 来设置您的项目，特别是如果您是 npm/bundlers 世界的初学者

【讨论】：

挂载没有变化，例如在旧代码中？什么都没有？
有一些变化，但它们仍然兼容，并且您得到的错误不是由 vue 2/vue 3 兼容性问题引起的
有重大更改，因此并非所有 vue 2 组件都与 vue 3 兼容。v3.vuejs.org/guide/migration/array-refs.html 重大更改之一，v-for refs in vue 2 分配给数组，v-for refs in vue 3 使用函数回调。
@gbalduzzi 你好，你从哪里读到“Vue2 组件在 Vue3 中工作”。 ?我很好奇，因为我找不到来源，我需要它，因为我想我听到了同样的事情。