Vite v5中Vue v-model双向绑定失效，报withDirectives警告

问题原因 #

你的项目同时加载了两个独立的Vue实例：

• HTML中通过CDN引入的全局Vue对象
• Vite通过npm依赖管理的Vue包

两者内部实现逻辑冲突，导致指令处理函数（如withDirectives）被错误调用，最终触发警告且v-model双向绑定功能失效。

解决方案 #

1. 移除HTML中的CDN Vue脚本 #

修改dex.html，删除以下两行重复的Vue相关CDN引入：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4"></script>

2. 修正maindex.js的Vue导入方式 #

从npm依赖的Vue包中正确导入createApp，而非使用全局Vue对象：

import './assets/main.css'
import { createApp } from 'vue'
import appdex from './components/appdex.vue';

const app = createApp(appdex)
app.mount('#app')

3. 确保依赖安装完整 #

如果项目尚未安装Vue或Vue Router，在项目根目录执行以下命令：

# 安装Vue3
npm install vue

# 若需使用Vue Router，安装对应版本
npm install vue-router@4

补充说明 #

你找到的vue.config.js别名方案适用于Webpack/Vue CLI项目，用于强制依赖解析到本地npm包。但Vite的模块解析机制不同，你的问题核心是重复加载Vue实例，因此移除重复引入才是最直接有效的解决方式。

内容的提问来源于stack exchange，提问作者Nitin