webpack如何將vue3單頁(yè)面應(yīng)用改造成多頁(yè)面應(yīng)用

更新時(shí)間：2023年05月23日 16:42:42 作者：自己瞎琢磨

這篇文章主要介紹了webpack如何將vue3單頁(yè)面應(yīng)用改造成多頁(yè)面應(yīng)用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、改一下項(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: