时间戳

首页 > 解决方案 > 如何将 Vue 2 x 转换为 Vue 3 x？

vue.js - 如何将 Vue 2 x 转换为 Vue 3 x？

问题描述

我们正在将 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”命令给出错误后。

标签： vue.jsvuejs3

解决方案

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

要在您的 Vue CLI 项目中启用它（基于迁移指南中的安装步骤），并修复您提到的代码：

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

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

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

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

  3. 将应用入口更新为新的全局挂载 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')

推荐阅读