webpack如何將vue3單頁(yè)面應(yīng)用改造成多頁(yè)面應(yīng)用
上篇文章搞了個(gè)單頁(yè)面vue,現(xiàn)在要將其改成多頁(yè)面,只是簡(jiǎn)單嘗試,給了例子
其實(shí)也就是改個(gè)webpack的入口和html模版的配置,其他的話,每個(gè)頁(yè)面都有自己的vue和路由實(shí)例,pinia的話就共享吧
!important,這里是根據(jù)上篇文章配置的更改,更具體的配置可以參考上篇文章
一、改一下項(xiàng)目結(jié)構(gòu)
大概就是在src下新建一個(gè)pages目錄,然后再文件件下新建一個(gè)單頁(yè)面運(yùn)用,每個(gè)頁(yè)面都有自己的main.js和App.vue,此外還有自己的views和router,至于通用組件components和pinia文件夾就放在pages的目錄的同級(jí)區(qū)域,截圖如下:

這里我把index文件夾具體展開(kāi)了,page1里面也是類(lèi)似的結(jié)構(gòu),只不過(guò)page1當(dāng)中的index.js換成了page1.js,index.vue換成了page1.vue(實(shí)際上全寫(xiě)成main.js和App.vue也沒(méi)啥事,我就是手欠)。每個(gè)page的配置其實(shí)類(lèi)似vue-cli生成的單頁(yè)面運(yùn)用。( 忽略一下最下面的templates,那是存放html模板的地方)
二、更改webpack的配置
兩個(gè)部分,首先我們這里有兩個(gè)page,就有兩個(gè)入口文件
entry: {
index: path.resolve(__dirname, './src/pages/index/index.js'),
page1: path.resolve(__dirname, './src/pages/page1/page1.js')
},
output: {
path: path.resolve(__dirname, 'dist'), // 打包出口
filename: '[name].js', // 打包完的靜態(tài)資源文件名
clean: true,//每次打包都會(huì)刪除dist里面舊的內(nèi)容
},注意和上篇比較,我這里的output的filename有些更改,這些配置不是最終的,最后還有優(yōu)化一下結(jié)構(gòu)
第二個(gè)則是html模板的改變,這里的話需要?jiǎng)?chuàng)建兩個(gè)模板
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './templates/index.html'), // 我們要使用的 html 模板地址
filename: 'index.html', // 打包后輸出的文件名
title: 'index頁(yè)面',
chunks: ["index"]
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './templates/page1.html'), // 我們要使用的 html 模板地址
filename: 'page1.html', // 打包后輸出的文件名
title: 'page1頁(yè)面',
chunks: ["page1"]
}),
new VueLoaderPlugin() //vue-loader插件
],這里有兩個(gè)htmlwebpackplugin的插件配置,每個(gè)配置對(duì)應(yīng)了一個(gè)頁(yè)面,兩個(gè)模板我也放在了pages同級(jí)的template文件夾之中,template文件夾如下:

里面的模版都是一樣的,如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<div id="root"></div>
</body>就是body里面加了個(gè)id是root的格子,方便我們vue實(shí)例的掛載
另外要注意一下,我們兩個(gè)page的vue實(shí)例是公用的一個(gè)pinia例子,我不太確定能不能用,所以的話,測(cè)試了一下,大體就是創(chuàng)建了一個(gè)userInfor的pinia模塊,寫(xiě)下如下的配置
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => {
return { userName: "黃烽" }
},
// 也可以這樣定義
// state: () => ({ count: 0 })
actions: {
changeName () {
this.userName = "gss"
}
},
})在index頁(yè)面的views的Home.vue上進(jìn)行一下展示,這個(gè)頁(yè)面還有一個(gè)按鈕,觸發(fā)之后會(huì)觸發(fā)change函數(shù),將頁(yè)面導(dǎo)向page1.html
<template>
<div class="msg">this msg is from page index
<span>this is from span</span><br />
<span>{{ "userName: " + user.userName }}</span>
<button @click="change">跳轉(zhuǎn)</button>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
import { useUserStore } from "../../../pinia/userInfor.js"
const user = useUserStore()
const testFunction = (msg) => {
alert(msg)
}
onMounted(() => {
testFunction("hhhh")
})
const change = () => {
window.location.href = "./page1.html"
}
</script>
<style scoped lang="scss">
.msg {
color: red;
span {
color: green;
}
}
</style>對(duì)應(yīng)的page1當(dāng)中的Home.vue的配置如下
<template>
<div class="msg">this msg is from page1
<span>this is from span</span><br />
<span>{{ "userName: " + user.userName }}</span>
<button @click="change">改變用戶姓名</button>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
import { useUserStore } from "../../../pinia/userInfor.js"
const user = useUserStore()
const change = () => {
user.changeName()
}
const testFunction = (msg) => {
alert(msg)
}
onMounted(() => {
testFunction("hhhh")
})
</script>
<style scoped lang="scss">
.msg {
color: red;
span {
color: green;
}
}
</style>基本上是一樣的,除了msg內(nèi)容不同之外,就是這里的change函數(shù)測(cè)試的是pinia當(dāng)中的一個(gè)mutation。
最后一步就是打開(kāi)dev 服務(wù)器測(cè)試,npm run dev,然后就行了,雖然有點(diǎn)簡(jiǎn)單,但是基本的意思是有了 ,打包之后dist文件夾里就是這個(gè)樣子

三、結(jié)尾
其實(shí)還是比較簡(jiǎn)單的,難的還是相關(guān)的優(yōu)化,我個(gè)人對(duì)優(yōu)化還是有些模糊的,有機(jī)會(huì)寫(xiě)幾個(gè)優(yōu)化的例子。
到此這篇關(guān)于webpack將vue3單頁(yè)面應(yīng)用改造成多頁(yè)面應(yīng)用的文章就介紹到這了,更多相關(guān)vue單頁(yè)面應(yīng)用改造成多頁(yè)面應(yīng)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
elementUI實(shí)現(xiàn)下拉選項(xiàng)加多選框的示例代碼
因產(chǎn)品需求和UI樣式調(diào)整,本文主要實(shí)現(xiàn)elementUI下拉選項(xiàng)加多選框的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
vue?模板循環(huán)繪制多行上傳文件功能實(shí)現(xiàn)
這篇文章主要為大家介紹了vue?模板循環(huán)繪制多行上傳文件功能實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
超詳細(xì)動(dòng)手搭建一個(gè)VuePress 站點(diǎn)及開(kāi)啟PWA與自動(dòng)部署的方法
這篇文章主要介紹了超詳細(xì)動(dòng)手搭建一個(gè)VuePress 站點(diǎn)及開(kāi)啟PWA與自動(dòng)部署的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
基于Vue自定義指令實(shí)現(xiàn)按鈕級(jí)權(quán)限控制思路詳解
這篇文章主要介紹了基于vue自定義指令實(shí)現(xiàn)按鈕級(jí)權(quán)限控制,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
Vue3中級(jí)指南之如何在vite中使用svg圖標(biāo)詳解
在以webpack為構(gòu)建工具的開(kāi)發(fā)環(huán)境中我們可以很方便的實(shí)現(xiàn)SVG圖標(biāo)的組件化,下面這篇文章主要給大家介紹了關(guān)于Vue3中級(jí)指南之如何在vite中使用svg圖標(biāo)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
vue實(shí)現(xiàn)頁(yè)面切換滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面切換滑動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06

