如何将 Vue 2 x 转换为 Vue 3 x？

Question

我们正在将 Vue 集成到现有的 ASP.Net MVC 应用程序中

以下代码 (Vue 2 X) 在我们的 .Net 应用程序中运行良好

new Vue({
  el: '#component1',
  render: h => h(App)
});

要将 Vue 2 X 转换为 Vue 3 X，使用命令“vue add vue-next”，在执行命令版本更改后，“npm run build”命令出错。

Answer 1

您可以使用Vue 3 migration build 来帮助升级。它填充了大部分 Vue 2 代码，同时发出控制台警告，帮助您确定要迁移的内容。

在您的 Vue CLI 项目中启用它（基于 installation steps from the migration guide），并修复您提到的代码：

1. 更新vue到3.1，并安装相同版本的@vue/compat：

   npm i -S @vue/compat@^3.1.4
   npm i -S vue@^3.1.4
   

2. 设置从vue 到@vue/compat 的别名：

   // vue.config.js
   module.exports = {
     chainWebpack: config => {
       config.resolve.alias.set('vue', '@vue/compat')
     }
   }
   

3. 将应用入口更新为new global mounting API：

   // import Vue from 'vue'
   // import App from './App.vue'
   // new Vue({ el: '#component1', render: h => h(App) });
   
   import { createApp } from 'vue'
   import App from './App.vue'
   createApp(App).mount('#component1')