ASP.NET集成Vue2后保留原有HTML的解决方案咨询

你的操作步骤本身没问题，但核心问题在于Vue CLI默认构建的项目会用render函数渲染指定组件（哪怕是空组件），挂载时会直接替换目标元素的所有内容，这就是原有HTML被清空的原因。要保留ASP.NET的原有HTML，需要让Vue以渐进式挂载的方式复用现有DOM，而不是替换它，具体调整如下：

1. 修改Vue项目的入口配置 #

打开Vue CLI项目的src/main.js，删除默认的render选项，直接挂载到目标元素，让Vue把现有DOM当作模板：

// src/main.js
import Vue from 'vue'

// 不要添加render或template选项
new Vue({
  el: '#app' // 这里的#app要和ASP.NET页面中的目标元素ID一致
})

// 或者用$mount方法也可以：
// new Vue({}).$mount('#app')

2. 启用Vue的运行时编译器 #

因为要让Vue编译页面中已有的HTML模板，需要启用运行时编译器版本。在Vue CLI项目根目录新建或修改vue.config.js：

// vue.config.js
module.exports = {
  runtimeCompiler: true
}

3. 重新构建并部署Vue资源 #

执行npm run build重新构建项目，将dist目录下生成的JS文件（通常在dist/js/下）复制到ASP.NET项目的静态资源目录（比如wwwroot/js/）。

4. 在ASP.NET页面中配置挂载 #

在ASP.NET的HTML页面里，用目标元素（比如<div id="app">）包裹需要Vue增强的原有HTML内容，然后引入构建好的Vue JS文件：

<!-- ASP.NET页面中的HTML -->
<div id="app">
  <!-- 这里保留ASP.NET生成的原有HTML -->
  <h1>@ViewBag.Title</h1>
  <p>这是ASP.NET原生内容</p>
  <!-- 可以直接在原有HTML中添加Vue指令 -->
  <input type="text" v-model="username">
  <p>你好，{{ username }}</p>
</div>

<!-- 引入构建好的Vue JS文件 -->
<script src="~/js/app.xxxx.js"></script>

这样配置后，Vue会编译目标元素内的现有HTML，保留所有ASP.NET生成的内容，同时可以在其中使用Vue的双向绑定、指令等特性，不会清空原有DOM。

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