一、Vue項(xiàng)目，什么是多頁面應(yīng)用
Vue是一種單頁面應(yīng)用程序（SPA）框架，這意味著Vue應(yīng)用程序通常只有一個HTML頁面，而在該頁面上進(jìn)行動態(tài)的內(nèi)容更改，而不是每次都加載新的HTML頁面。?
但是，有時候我們需要在同一應(yīng)用程序中擁有多個獨(dú)立的頁面，每個頁面都可以單獨(dú)處理路由和邏輯。這就是多頁面應(yīng)用（MPA）的概念。在Vue中，實(shí)現(xiàn)多頁面應(yīng)用程序的方法是使用Vue的多入口特性，即通過配置多個入口文件來實(shí)現(xiàn)。
每個入口文件都有自己的路由配置、組件和其他相關(guān)資源。這些入口文件可以在構(gòu)建時生成多個獨(dú)立的HTML文件，每個HTML文件都有對應(yīng)的JavaScript和CSS文件。這些文件可以獨(dú)立部署和運(yùn)行，使得應(yīng)用程序能夠更靈活地擴(kuò)展和維護(hù)。
二、什么場景適合開發(fā)多頁面應(yīng)用程序
2.1、企業(yè)級應(yīng)用程序：對于大型企業(yè)級應(yīng)用程序，可能需要許多獨(dú)立的功能模塊，每個模塊都有自己的獨(dú)立需求和邏輯。使用多頁面應(yīng)用程序可以更好地組織和管理這些模塊，使得每個模塊的代碼更加清晰和易于維護(hù)。
2.2、多語言站點(diǎn)：在多語言站點(diǎn)中，每個頁面都需要獨(dú)立處理語言切換和文本翻譯。使用多頁面應(yīng)用程序可以更好地管理這些獨(dú)立的頁面，并且可以針對不同的語言生成不同的頁面。
2.3、營銷活動頁面：在營銷活動頁面中，通常需要快速開發(fā)和部署大量的獨(dú)立頁面。使用多頁面應(yīng)用程序可以更好地組織和管理這些頁面，使得開發(fā)人員可以更快速地開發(fā)和部署頁面，而不用擔(dān)心影響其他頁面的問題。
2.4、大規(guī)模、獨(dú)立和獨(dú)立需求的應(yīng)用程序，那么多頁面應(yīng)用程序是非常適合的選擇。
三、創(chuàng)建vue-ts-vite項(xiàng)目
vue3：vue3+vite+ts+pinia_vue3+ts+vite+pinia_snow@li的博客-CSDN博客
四、代碼實(shí)現(xiàn) /?vue3 ts vite 項(xiàng)目 配置多頁面應(yīng)用
4.1、本文目標(biāo)實(shí)現(xiàn)配置三個（入口）頁面的vue-ts-vite多頁面應(yīng)用
index.html
about.html
contact.html4.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對象用于指定多個入口文件，每個入口文件都應(yīng)該對應(yīng)于項(xiàng)目根目錄下的一個HTML文件。
4.3、依據(jù)main.ts創(chuàng)建入口文件
創(chuàng)建 src/main-index.ts（main.ts重命名為main-index.ts）
創(chuàng)建? src/main-about.ts
創(chuàng)建? src/main-contact.ts
文件內(nèi)容來自初始項(xiàng)目main.ts，均為如下內(nèi)容：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
4.4、在每個HTML文件中，需要使用script標(biāo)簽引入每個頁面的入口文件
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、運(yùn)行項(xiàng)目
pnpm run dev
4.6、分別訪問三個頁面
4.6.1、訪問index頁面
4.6.2、訪問about頁面
4.6.3、訪問contact頁面
4.7、構(gòu)建項(xiàng)目
pnpm run build
4.8、部署
構(gòu)建完成后，每個頁面的文件都會被打包到dist目錄下，然后可以將這些文件部署到Web服務(wù)器上。
五、歡迎交流指正
六、相關(guān)連接
構(gòu)建生產(chǎn)版本 | Vite 官方中文文檔文章來源：http://www.zghlxwxcb.cn/news/detail-632136.html
入口起點(diǎn)(entry points) | webpack 中文文檔文章來源地址http://www.zghlxwxcb.cn/news/detail-632136.html
到了這里，關(guān)于vue3-ts-vite：vue 項(xiàng)目 配置 多頁面應(yīng)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
