vue多页面应用开发,国内能看的vps,云vps搭建ss教程,VPS服务器备份步骤,vps远程服务器桌面

🗣 Wd提问: vue多页面应用开发

🤖 Ai回答:
Vue 多页面应用（Multi-Page Application，MPA）开发是指一个项目中包含多个 HTML 页面，每个页面都有独立的入口文件（entry），各自打包成独立的 JS/CSS 文件，并在浏览器中作为独立页面加载。这与单页面应用（SPA）不同，SPA 只有一个 HTML 文件，通过路由动态切换内容。

Vue CLI 3+ 和 Vite 都支持多页面配置，下面分别介绍两种主流方式：

✅ 一、使用 Vue CLI 构建多页面应用（推荐用于传统项目）

1、项目结构示例

src/
├── pages/
│ ├── index/
│ │ ├── main.js
│ │ └── index.html
│ └── admin/
│ ├── main.js
│ └── index.html
├── App.vue
└── main.js (可选，非必须)

每个 `page` 文件夹下有一个 `main.js` 作为入口，和一个 `index.html` 作为模板。

2、修改 `vue.config.js`

js
// vue.config.js
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
pages: {
index: {
entry: 'src/pages/index/main.js',
template: 'src/pages/index/index.html',
filename: 'index.html',
title: '首页',
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
admin: {
entry: 'src/pages/admin/main.js',
template: 'src/pages/admin/index.html',
filename: 'admin.html',
title: '管理后台',
chunks: ['chunk-vendors', 'chunk-common', 'admin']
}
},
// 可选：关闭 SPA 模式（默认开启）
lintOnSave: false,
chainWebpack: config = {
// 可选：配置别名、优化等
}
})

3、创建页面入口文件

`src/pages/index/main.js`
js
import { createApp } from 'vue'
import App from '../../App.vue'

createApp(App).mount('app')

`src/pages/admin/main.js`
js
import { createApp } from 'vue'
import AdminApp from '../../AdminApp.vue' // 可以是另一个根组件

createApp(AdminApp).mount('app')

4、创建 HTML 模板

`src/pages/index/index.html`
html
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8 /
<meta name=viewport content=width=device-width, initial-scale=1.0 /
<title<%= htmlWebpackPlugin.options.title %</title
</head
<body
<div id=app</div
</body
</html

`src/pages/admin/index.html` 同理，可自定义标题、样式等。

5、启动和构建

bash
开发模式
npm run serve

生产构建
npm run build

构建后，输出目录 `dist/` 中会生成：

dist/
├── index.html
├── admin.html
├── js/
│ ├── chunk-vendors.xxx.js
│ ├── index.xxx.js
│ └── admin.xxx.js
└── css/
└── ...

访问 `http://localhost:8080/index.html` 和 `http://localhost:8080/admin.html` 即可。

⚠️ 注意：Vue CLI 默认会把 `index.html` 作为默认页，访问根路径 `/` 时加载 `index.html`。如需访问 admin，需完整路径 `/admin.html`。

✅ 二、使用 Vite 构建多页面应用（推荐用于现代项目）

Vite 本身不内置多页面支持，但可通过插件 `vite-plugin-pages` 或手动配置实现。

推荐方案：使用 `vite-plugin-pages`（自动路由 + 多页面）

但注意：`vite-plugin-pages` 更偏向 SPA 的“页面路由”而非真正的多页面（每个页面独立 HTML）。

✅ 真正的多页面（手动配置）

1、项目结构

src/
├── pages/
│ ├── index/
│ │ ├── main.js
│ │ └── index.html
│ └── admin/
│ ├── main.js
│ └── index.html
├── App.vue
└── AdminApp.vue

2、修改 `vite.config.js`

js
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
input: {
index: path.resolve(__dirname, 'src/pages/index/main.js'),
admin: path.resolve(__dirname, 'src/pages/admin/main.js')
},
output: {
entryFileNames: 'assets/[name].[hash].js',
chunkFileNames: 'assets/[name].[hash].js',
assetFileNames: 'assets/[name].[hash].[ext]'
}
}
},
// 配置 HTML 模板
plugins: [
vue(),
{
name: 'html-transform',
transformIndexHtml(html, { path }) {
if (path === '/index.html') {
return html.replace('<titleVite App</title', '<title首页</title')
}
if (path === '/admin.html') {
return html.replace('<titleVite App</title', '<title管理后台</title')
}
return html
}
}
]
})

3、创建 HTML 模板（放在 `public/` 目录）

Vite 会直接复制 `public/` 下的文件到根目录。

创建：
`public/index.html`
`public/admin.html`

`public/index.html`
html
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8 /
<meta name=viewport content=width=device-width, initial-scale=1.0 /
<title首页</title
</head
<body
<div id=app</div
<script type=module src=/src/pages/index/main.js</script
</body
</html

`public/admin.html`
html
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8 /
<meta name=viewport content=width=device-width, initial-scale=1.0 /
<title管理后台</title
</head
<body
<div id=app</div
<script type=module src=/src/pages/admin/main.js</script
</body
</html

⚠️ 注意：这种方式下，Vite 不会自动注入打包后的资源，需手动写 `<script` 引入入口文件，不推荐，因为会失去热更新和资源哈希。

✅ 更佳方案：使用 `vite-plugin-html` 插件（推荐）

bash
npm install vite-plugin-html -D

修改 `vite.config.js`

js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from 'vite-plugin-html'
import path from 'path'

export default defineConfig({
plugins: [
vue(),
createHtmlPlugin({
minify: true,
entries: [
{
entry: 'src/pages/index/main.js',
template: 'src/pages/index/index.html',
filename: 'index.html',
title: '首页'
},
{
entry: 'src/pages/admin/main.js',
template: 'src/pages/admin/index.html',
filename: 'admin.html',
title: '管理后台'
}
]
})
],
build: {
rollupOptions: {
input: {
index: path.resolve(__dirname, 'src/pages/index/main.js'),
admin: path.resolve(__dirname, 'src/pages/admin/main.js')
}
}
}
})

创建模板文件（`src/pages/index/index.html`）

html
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8 /
<meta name=viewport content=width=device-width, initial-scale=1.0 /
<title<%= htmlWebpackPlugin.options.title %</title
</head
<body
<div id=app</div
</body
</html

`vite-plugin-html` 会自动注入打包后的 JS/CSS 文件，支持热更新，推荐使用！

🚀 多页面应用适用场景

| 场景 | 是否推荐 |

| 企业官网 + 管理后台 | ✅ 推荐（独立部署、SEO 友好） |
| 多个独立子系统（如 H5 活动页） | ✅ 推荐 |
| 需要 SEO 的页面（如产品页、文章页） | ✅ 推荐 |
| 移动端单应用、后台管理系统 | ❌ 不推荐（SPA 更

Ai作答

📣 商家广告：