html模板页面包含其他页面Vue3多页面开辟

1.利用vue创建单页面运用程序

见《Vue3脚手架指南》文章

2.在项目的根目录下创建vue.config.js文件，如果已经创建则忽略

html模板页面包含其他页面Vue3多页面开辟 RESTful API

3.在src目录下新建module文件夹，用于存放多页面干系文件

module文件夹下用来存放页面文件，一个页面须要有最少三个文件构成，.html、.js、.vue，以是要创建一个终极的页面，我们须要创建三个文件，在实际开拓中，最好根据自己的习气或者公司的约定来起文件名。
我们一样平常会根据页面的名称来命名。
比如登录页：login.html、login.js、login.vue。

4.在module下建立页面

我们这里建立三个页面：login、major、sub/sub1，根据这个需求，为了便于项目文件的管理，我们在module目录下创建相应的子文件sub，在module下创建login和major的三个文件，在sub目录下创建sub1的三个文件，如下图：

5.编写代码

我们以login页面为例来解释：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Login</title></head><body><div id="app"></div></body></html>

import { createApp } from 'vue'import App from './login.vue'createApp(App).mount('#app')

<template> <div>登录页</div></template><script>export default { name: 'App'}</script><style scoped></style>

其他页面的代码，请参照login页面代码编写。

6.在 vue.config.js 文件中配置多页面运用

vue.config.js

module.exports = { pages: { login: { // 入口文件，相称于单页面的 main.js entry: 'src/module/login.js', // 模板文件 template: 'src/module/login.html', // 编译后 dist 目录下输出的文件，可以包含子目录 filename: 'login.html' }, major: { entry: 'src/module/major.js', template: 'src/module/major.html', filename: 'major.html' }, 'sub1': { entry: 'src/module/sub/sub1.js', template: 'src/module/sub/sub1.html', filename: 'sub/sub1.html' } }}

7.启动运用

>npm run server

访问：

http://127.0.0.1:8080/login.htm

http://127.0.0.1:8080/major.html

http://127.0.0.1:8080/sub/sub1.html

8.构建运用

>npm run build

构建结果如下：