如何在现有多页面应用（MPA）中安装使用VueJS 3.0？

Vue 3完全可以作为库接入现有多页面应用，它兼具库和框架的特性，并非只能构建SPA。下面针对不同场景给出具体实现方式，适配Asp.Net Core Razor Pages、PHP、Django这类MPA项目：

一、CDN快速接入（无需构建工具） #

适合简单组件或快速测试场景，直接在MPA页面中引入Vue 3：

1. 在目标页面（如.cshtml/.php/.html）的<head>或<body>末尾添加Vue 3的CDN链接：

<!-- 开发版，包含调试信息 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 生产版，体积更小 -->
<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> -->

2. 在页面中定义Vue挂载的DOM节点：

<div id="vue-app"></div>

3. 编写Vue代码，创建实例并挂载：

<script>
const { createApp } = Vue

// 选项式API（类似Vue 2写法）
createApp({
  data() {
    return {
      message: 'Hello Vue 3 in MPA!'
    }
  },
  template: `<h1>{{ message }}</h1>`
}).mount('#vue-app')

// 或组合式API
// createApp({
//   setup() {
//     const message = Vue.ref('Hello Vue 3 with Composition API!')
//     return { message }
//   },
//   template: `<h1>{{ message }}</h1>`
// }).mount('#vue-app')
</script>

二、构建工具（Vite）适配方案 #

如果需要使用单文件组件（.vue）、ES模块等特性，可通过Vite打包后接入MPA：

1. 初始化Vite项目：
   执行npm create vite@latest，选择vanilla模板（不要选Vue SPA模板），进入项目目录后安装依赖：

   npm install
   

2. 配置Vite打包输出：
   修改vite.config.js，设置打包产物为UMD/IIFE格式，方便在MPA页面中直接引入：

   import { defineConfig } from 'vite'
   
   export default defineConfig({
     build: {
       // 输出为IIFE格式，适合直接在浏览器中引入
       lib: {
         entry: './src/main.js',
         name: 'VueMPAComponent',
         formats: ['iife'],
         fileName: (format) => `vue-mpa-component.${format}.js`
       },
       // 如果需要多页面对应不同组件，可配置rollup多入口
       // rollupOptions: {
       //   input: {
       //     page1: './src/page1.js',
       //     page2: './src/page2.js'
       //   }
       // }
     }
   })
   

3. 编写Vue组件与入口文件：
   在src目录下创建单文件组件（如Hello.vue）：

   <template>
     <div class="hello">
       <h2>{{ greeting }}</h2>
       <p>Count: {{ count }}</p>
       <button @click="count++">Increment</button>
     </div>
   </template>
   
   <script setup>
   import { ref } from 'vue'
   const greeting = ref('Hello from Vue SFC in MPA!')
   const count = ref(0)
   </script>
   

   然后在src/main.js中编写挂载逻辑：

   import { createApp } from 'vue'
   import Hello from './Hello.vue'
   
   // 挂载到页面中指定的DOM节点
   createApp(Hello).mount('#vue-app')
   

4. 打包并接入MPA：
   执行npm run build，打包后的文件会生成在dist目录。将该目录下的js文件复制到你的MPA项目的静态资源目录（如Asp.Net Core的wwwroot/dist），然后在目标页面中引入：

   <!-- 在.cshtml页面中引入 -->
   <div id="vue-app"></div>
   <script src="~/dist/vue-mpa-component.iife.js"></script>
   

三、针对Asp.Net Core Razor Pages的额外提示 #

• 可通过Asp.Net Core的静态资源中间件配置，确保dist目录的资源能被正确访问。
• 如果不同Razor页面需要不同的Vue组件，可在Vite中配置多入口，每个入口对应一个页面的组件，打包后在对应页面引入对应的js文件即可。

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