页面配置

VUE单页面应用能解决目前大多数网站的需求，如果是大型项目或网站群单页面就不能满足要求。比如常见的电商网站和管理后台，这两个页面是不兼容的，如果使用SPA就需要建立两个项目耗费更多的管理成本。项目仅有两三个页面的情况下可以使用SPA，但随着不同页面网站增加我们就需要考虑多页面应用。

基于vue cli3.0创建vue项目，目录结构如下：

├─public
|   ├─favicon.icon
|   └index.html
├─src
|   ├─asserts
|   ├─components
|   ├─app.vue
|   └main.js

1
2
3
4
5
6
7
8

单页面应用主要依赖三个标准文件：入口文件（main.js）、模板文件（index.html）、VUE渲染入口文件（app.vue），如果是多页面应用代表同时又多个以上文件。

添加多个入口，修改项目结构如下：

├─public
|   ├─favicon.icon
├─src
|   ├─views
|   |   ├─person
|   |   |   ├─person.html
|   |   |   ├─person.js
|   |   |   └person.vue
|   |   ├─index
|   |   |   ├─index.html
|   |   |   ├─index.js
|   |   |   ├─index.vue
|   |   ├─article
|   |   |    ├─article.html
|   |   |    ├─article.js
|   |   |    ├─article.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

添加三个页面对应的html、js、vue文件移除public下的index.html，三个文件中的内容参考原单页面应用：main.js、index.html、app.vue。

在工程根目录添加vue.config.js文件，在文件中添加如下配置。参考

module.exports = {
	pages: {
		index: {
			entry: "./src/views/index/index.js",
			template: "./src/views/index/index.html",
			filename: "index.html",
			title: "index页面"
		},
		person: {
			entry: "./src/views/person/person.js",
			template: "./src/views/person/person.html",
			filename: "person.html",
			title: "person页面"
		},
		article: {
			entry: "./src/views/article/article.js",
			template: "./src/views/article/article.html",
			filename: "article.html",
			title: "article页面"
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

运行项目

npm run serve

切换路径可跳转页面

默认index：http://192.168.2.170:8081/#/
article页面：http://192.168.2.170:8081/article.html#/或http://192.168.2.170:8081/article#/
person页面：http://192.168.2.170:8081/person.html#/或http://192.168.2.170:8081/person#/

1
2
3

上次更新: 2025/09/05, 8:09:00

← vue组件延迟加载 vue项目常用优化→