如何推广自己的网站,徐州建设工程交易信息网,有人有片资源网,网站设计需要那些模块一、Vue项目#xff0c;什么是多页面应用
Vue是一种单页面应用程序#xff08;SPA#xff09;框架#xff0c;这意味着Vue应用程序通常只有一个HTML页面#xff0c;而在该页面上进行动态的内容更改#xff0c;而不是每次都加载新的HTML页面。
但是#xff0c;有时候我…一、Vue项目什么是多页面应用
Vue是一种单页面应用程序SPA框架这意味着Vue应用程序通常只有一个HTML页面而在该页面上进行动态的内容更改而不是每次都加载新的HTML页面。
但是有时候我们需要在同一应用程序中拥有多个独立的页面每个页面都可以单独处理路由和逻辑。这就是多页面应用MPA的概念。在Vue中实现多页面应用程序的方法是使用Vue的多入口特性即通过配置多个入口文件来实现。
每个入口文件都有自己的路由配置、组件和其他相关资源。这些入口文件可以在构建时生成多个独立的HTML文件每个HTML文件都有对应的JavaScript和CSS文件。这些文件可以独立部署和运行使得应用程序能够更灵活地扩展和维护。
二、什么场景适合开发多页面应用程序
2.1、企业级应用程序对于大型企业级应用程序可能需要许多独立的功能模块每个模块都有自己的独立需求和逻辑。使用多页面应用程序可以更好地组织和管理这些模块使得每个模块的代码更加清晰和易于维护。
2.2、多语言站点在多语言站点中每个页面都需要独立处理语言切换和文本翻译。使用多页面应用程序可以更好地管理这些独立的页面并且可以针对不同的语言生成不同的页面。
2.3、营销活动页面在营销活动页面中通常需要快速开发和部署大量的独立页面。使用多页面应用程序可以更好地组织和管理这些页面使得开发人员可以更快速地开发和部署页面而不用担心影响其他页面的问题。
2.4、大规模、独立和独立需求的应用程序那么多页面应用程序是非常适合的选择。
三、创建vue-ts-vite项目
vue3vue3vitetspinia_vue3tsvitepinia_snowli的博客-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.tsmain.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.vuecreateApp(App).mount(#app)4.4、在每个HTML文件中需要使用script标签引入每个页面的入口文件
4.4.1、index.html更新页面入口文件为main-index.ts完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleIndex Page/title
/head
bodydiv idapp/divscript typemodule src/src/main-index.ts/script
/body
/html4.4.2、同理about.html文件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleAbout Page/title
/head
bodydiv idapp/divscript typemodule src/src/main-about.ts/script
/body
/html4.4.3、同理contact.html文件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleContact Page/title
/head
bodydiv idapp/divscript typemodule src/src/main-contact.ts/script
/body
/html4.5、运行项目
pnpm run dev4.6、分别访问三个页面
4.6.1、访问index页面 4.6.2、访问about页面 4.6.3、访问contact页面 4.7、构建项目
pnpm run build4.8、部署
构建完成后每个页面的文件都会被打包到dist目录下然后可以将这些文件部署到Web服务器上。
五、欢迎交流指正关注我一起学习
