一、Vue项目,什么是多页面应用
Vue是一种单页面应用程序(SPA)框架,这意味着Vue应用程序通常只有一个HTML页面,而在该页面上进行动态的内容更改,而不是每次都加载新的HTML页面。
但是,有时候我们需要在同一应用程序中拥有多个独立的页面,每个页面都可以单独处理路由和逻辑。这就是多页面应用(MPA)的概念。在Vue中,实现多页面应用程序的方法是使用Vue的多入口特性,即通过配置多个入口文件来实现。
每个入口文件都有自己的路由配置、组件和其他相关资源。这些入口文件可以在构建时生成多个独立的HTML文件,每个HTML文件都有对应的JavaScript和CSS文件。这些文件可以独立部署和运行,使得应用程序能够更灵活地扩展和维护。
二、什么场景适合开发多页面应用程序
2.1、企业级应用程序:对于大型企业级应用程序,可能需要许多独立的功能模块,每个模块都有自己的独立需求和逻辑。使用多页面应用程序可以更好地组织和管理这些模块,使得每个模块的代码更加清晰和易于维护。
2.2、多语言站点:在多语言站点中,每个页面都需要独立处理语言切换和文本翻译。使用多页面应用程序可以更好地管理这些独立的页面,并且可以针对不同的语言生成不同的页面。
2.3、营销活动页面:在营销活动页面中,通常需要快速开发和部署大量的独立页面。使用多页面应用程序可以更好地组织和管理这些页面,使得开发人员可以更快速地开发和部署页面,而不用担心影响其他页面的问题。
2.4、大规模、独立和独立需求的应用程序,那么多页面应用程序是非常适合的选择。
三、创建vue-ts-vite项目
vue3:vue3+vite+ts+pinia_vue3+ts+vite+pinia_snow@li的博客-CSDN博客
四、代码实现 / vue3 ts vite 项目 配置多页面应用
4.1、本文目标实现配置三个(入口)页面的vue-ts-vite多页面应用
index.html
about.html
contact.html
4.2、vite.config.ts文件添加配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
// 配置多页面
input: {
index: './index.html',
about: './about.html',
contact: './contact.html',
},
},
},
})
以上配置中,input
对象用于指定多个入口文件,每个入口文件都应该对应于项目根目录下的一个HTML文件。
4.3、依据main.ts创建入口文件
创建 src/main-index.ts(main.ts重命名为main-index.ts)
创建 src/main-about.ts
创建 src/main-contact.ts
文件内容来自初始项目main.ts,均为如下内容:
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
4.4、在每个HTML文件中,需要使用script标签引入每个页面的入口文件
4.4.1、index.html更新页面入口文件为main-index.ts
,完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index Page</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main-index.ts"></script>
</body>
</html>
4.4.2、同理,about.html
文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Page</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main-about.ts"></script>
</body>
</html>
4.4.3、同理,contact.html
文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Page</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main-contact.ts"></script>
</body>
</html>
4.5、运行项目
pnpm run dev
4.6、分别访问三个页面
4.6.1、访问index页面
4.6.2、访问about页面
4.6.3、访问contact页面
4.7、构建项目
pnpm run build
4.8、部署
构建完成后,每个页面的文件都会被打包到dist
目录下,然后可以将这些文件部署到Web服务器上。
五、欢迎交流指正
六、相关连接
构建生产版本 | Vite 官方中文文档文章来源:https://www.toymoban.com/news/detail-632136.html
入口起点(entry points) | webpack 中文文档文章来源地址https://www.toymoban.com/news/detail-632136.html
到了这里,关于vue3-ts-vite:vue 项目 配置 多页面应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!