vue vite 多页面应用与vue cli多页面应用 (MPA)及其比较(避坑)

在Vue中，可以通过Vite创建多页面应用程序(MPA)，而不是使用Vue CLI。以下是创建Vue多页面应用程序的步骤：

1. 使用Vite创建新项目：

npm create vite@latest my-vue-mpa-app -- --template vanilla

2. 进入项目目录并安装Vue：

cd my-vue-mpa-app
npm install vue

3. 在项目中创建多个Vue页面。例如，创建一个src/pages目录，并在该目录下添加两个Vue组件：HomePage.vue和AboutPage.vue。

src/pages/HomePage.vue:

<template>
  <div>Home Page</div>
</template>
 
<script>
export default {
  name: 'HomePage'
}
</script>

src/pages/AboutPage.vue:

<template>
  <div>About Page</div>
</template>
 
<script>
export default {
  name: 'AboutPage'
}
</script>

4. 在vite.config.js中配置多页面支持：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        home: './src/pages/HomePage.vue',
        about: './src/pages/AboutPage.vue',
      },
    },
  },
})

5. 运行开发服务器：

npm run dev

6. 构建项目：

npm run build

这样，你就创建了一个基于Vite的Vue多页面应用程序。每个页面都将被视作一个独立的入口，并且可以独立进行构建和部署。

在Vue CLI创建的项目中，通常是单页面应用程序(SPA)，可以通过vue-router进行路由管理以模拟多页面的效果，但这并不是真正的多页面应用程序，并且会有一些限制和性能考量，比如每个页面都会加载整个应用程序的依赖和框架，因此在需要多页面应用程序时，应该选择Vite创建项目。