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;