uniapp vue2项目迁移vue3项目

最新推荐文章于 2025-05-24 12:42:48 发布

苹果醋3

最新推荐文章于 2025-05-24 12:42:48 发布

阅读量2.2k

点赞数 16

CC 4.0 BY-SA版权

分类专栏：面试题汇总与解析文章标签：课程设计 spring boot vue.js nginx 运维

本文链接：https://blog.csdn.net/pingguocu3/article/details/143980982

uniapp vue2项目迁移vue3项目，必须适配的部分

一、main.js 创建应用实例

// 之前 - Vue 2
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false    // vue3 不再需要
App.mpType = 'app'    // vue3 不再需要
const app = new Vue({
...App
})
app.$mount()
 
// 之后 - Vue 3
import App from './App'
import { createSSRApp } from 'vue'
export function createApp() {
   const app = createSSRApp(App)
   return {
      app
   }
}

二、全局属性，例如：全局网络请求

// 之前 - Vue 2
Vue.prototype.$http = () => {};
 
// 之后 - Vue 3
const app = createApp({});
app.config.globalProperties.$http = () => {};

三、插件使用，例如：使用 vuex 的 store

// 之前 - Vue 2
import store from "./store";
Vue.prototype.$store = store;
 
// 之后 - Vue 3
import store from "./store";
const app = createApp(App);
app.use(store);

四、项目根目录必需创建 index.html 文件，粘贴复制如下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title></title>
    <!--preload-links-->
    <!--app-context-->
  </head>
  <body>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/https/blog.csdn.net/main.js"></script>
  </body>
</html>