ASP.NET MVC中CSHTML渲染页面后Vue失效，报'app已声明'错误

问题核心 #

你遇到的报错根源是同一页面重复使用const app声明变量——ASP.NET MVC渲染后，_layout和视图会合并成单个HTML页面，ES6中const变量不允许重复声明，这和挂载的DOM ID无关。

具体解决方法 #

方法1：给Vue实例使用不同变量名

直接修改_layout和视图中的变量名，避免重复声明：

• _layout中的代码：

// 用唯一变量名标识布局的Vue实例
const layoutApp = Vue.createApp({ 
  data() { return { }; }, 
  methods: { /* 布局专属方法 */ } 
}).mount("#layout-container");

• 视图中的代码：

// 用另一个变量名标识视图的Vue实例
const viewApp = Vue.createApp({ 
  data() { return { }; }, 
  methods: { /* 视图专属方法 */ } 
}).mount("#view-container");

同时确保#layout-container和#view-container是页面中两个独立的DOM容器。

方法2：只初始化一次全局Vue实例（推荐）

如果布局和视图需要共享状态或方法，更合理的做法是仅在_layout中初始化一次全局Vue实例，视图中不再重复创建，而是通过组件扩展添加视图逻辑：

1. _layout中的全局实例初始化：

// 全局唯一的Vue实例
const app = Vue.createApp({ 
  data() { return { globalData: '全局共享数据' }; }, 
  methods: { globalMethod() { /* 全局通用方法 */ } } 
}).mount("#app");

2. 视图中直接使用全局实例，或注册局部组件：

<!-- 视图内容，直接绑定全局实例的数据和方法 -->
<div class="view-content">
  <p>{{ globalData }}</p>
  <button @click="globalMethod">调用全局方法</button>
  
  <!-- 使用视图自定义组件 -->
  <view-local-component></view-local-component>
</div>

<script>
// 给全局Vue实例注册视图专属组件
app.component('view-local-component', {
  data() { return { viewData: '视图局部数据' }; },
  template: '<p>{{ viewData }}</p>'
});
</script>

方法3：判断实例是否已存在再初始化

如果必须在多个位置保留初始化代码，可以通过变量存在性判断避免重复声明：

// 检查app是否未定义，再创建实例
if (typeof app === 'undefined') {
  const app = Vue.createApp({ 
    data() { return { }; }, 
    methods: { /* 方法 */ } 
  }).mount("#app");
}

视图中需要独立实例时，同理用不同变量名判断：

if (typeof viewApp === 'undefined') {
  const viewApp = Vue.createApp({ 
    data() { return { }; }, 
    methods: { /* 视图方法 */ } 
  }).mount("#view-container");
}

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