Django + Vue3 + Vite

Question

我正在将我的多页应用程序从 Vue2+webpack 升级到 Vue3+vite。

我到了可以在我的 django 模板上看到和渲染我的 vue3 的地步，所有设置似乎都在工作。

现在我需要使用 django 模板在 vue 应用程序上设置一些组件变量，但我无法获取我的 vue 实例来执行此操作。

在我使用之前：

//after window loads
app = document.getElementById('abc_app').__vue__ ;
app.message = "New Message";

它会显示新消息。

现在同样对 vue3 不再起作用，将代码更改为__vue__app__也不起作用。

来自 vue2 的入口 JS：

import Vue from 'vue'
import abc_app from './abc_app.vue'

const root_element = document.getElementById('abc_app');
const AppRoot = Vue.extend(abc_app);
new AppRoot({
    el: root_element,
    propsData: { ...root_element.dataset }
 });

Vue3 的新入口点

import abc_app from './abc_app.vue'
const root_element = document.getElementById('abc_app');
import { createApp } from 'vue'
import { createPinia } from 'pinia'

const app = createApp(abc_app)

app.use(createPinia())

app.mount(root_element)

Answer 1

我能够通过以下方式访问数据元素（不是方法）：

app = document.getElementById('abc_app'). __vue__app__.instance;