webpack如何将vue3单页面应用改造成多页面应用

更新时间：2023年05月23日 16:42:42 作者：自己瞎琢磨

这篇文章主要介绍了webpack如何将vue3单页面应用改造成多页面应用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

一、改一下项目结构

大概就是在src下新建一个pages目录，然后再文件件下新建一个单页面运用，每个页面都有自己的main.js和App.vue，此外还有自己的views和router，至于通用组件components和pinia文件夹就放在pages的目录的同级区域，截图如下：

这里我把index文件夹具体展开了，page1里面也是类似的结构，只不过page1当中的index.js换成了page1.js,index.vue换成了page1.vue（实际上全写成main.js和App.vue也没啥事，我就是手欠）。每个page的配置其实类似vue-cli生成的单页面运用。（忽略一下最下面的templates，那是存放html模板的地方）

二、更改webpack的配置

两个部分，首先我们这里有两个page，就有两个入口文件

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', // 打包完的静态资源文件名
        clean: true,//每次打包都会删除dist里面旧的内容
    },

注意和上篇比较，我这里的output的filename有些更改，这些配置不是最终的，最后还有优化一下结构

第二个则是html模板的改变，这里的话需要创建两个模板

plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './templates/index.html'), // 我们要使用的 html 模板地址
            filename: 'index.html', // 打包后输出的文件名
            title: 'index页面',
            chunks: ["index"]
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './templates/page1.html'), // 我们要使用的 html 模板地址
            filename: 'page1.html', // 打包后输出的文件名
            title: 'page1页面',
            chunks: ["page1"]
        }),
        new VueLoaderPlugin() //vue-loader插件
    ],

这里有两个htmlwebpackplugin的插件配置，每个配置对应了一个页面，两个模板我也放在了pages同级的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里面加了个id是root的格子，方便我们vue实例的挂载

另外要注意一下，我们两个page的vue实例是公用的一个pinia例子，我不太确定能不能用，所以的话，测试了一下，大体就是创建了一个userInfor的pinia模块，写下如下的配置

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
    state: () => {
        return { userName: "黄烽" }
    },
    // 也可以这样定义
    // state: () => ({ count: 0 })
    actions: {
        changeName () {
            this.userName = "gss"
        }
    },
})

在index页面的views的Home.vue上进行一下展示，这个页面还有一个按钮，触发之后会触发change函数，将页面导向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">跳转</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>

对应的page1当中的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内容不同之外，就是这里的change函数测试的是pinia当中的一个mutation。

最后一步就是打开dev 服务器测试，npm run dev，然后就行了，虽然有点简单，但是基本的意思是有了，打包之后dist文件夹里就是这个样子

三、结尾

其实还是比较简单的，难的还是相关的优化，我个人对优化还是有些模糊的，有机会写几个优化的例子。

到此这篇关于webpack将vue3单页面应用改造成多页面应用的文章就介绍到这了,更多相关vue单页面应用改造成多页面应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解Vite如何处理CSS预处理器
在现代前端开发中,CSS 预处理器如 Sass、Less 和 Stylus 等工具,为样式编写提供了更强大的功能和更好的开发体验,本文将探讨 Vite 是如何处理 CSS 预处理器的,以及如何在实际项目中配置和使用它们,需要的朋友可以参考下
2025-02-02
ElementUI实现el-table行列合并的操作步骤
在前端开发中,数据展示一直是一个重要的部分,而表格则是数据展示最常见的形式之一,ElementUI 是饿了么前端团队推出的一款基于 Vue 的 UI 组件库,其中的 el-table 组件是一个功能强大且灵活的表格组件,今天我们要详细探讨的是 el-table 的行列合并操作
2024-08-08
VUE 解决mode为history页面为空白的问题
今天小编就为大家分享一篇VUE 解决mode为history页面为空白的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
详解vue中的父子传值双向绑定及数据更新问题
这篇文章主要介绍了vue中的父子传值双向绑定及数据更新问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06
vue小图标favicon不显示的解决方案
本篇文章主要介绍了vue小图标favicon不显示的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
在uni-app中使用element-ui的方法与报错解决
我们在开web开发的时候，经常会使用到element或者uview-ui,下面这篇文章主要给大家介绍了关于在uni-app中使用element-ui的方法与报错解决的相关资料,需要的朋友可以参考下
2022-04-04
Vuex入门学习之Getter详解
这篇文章主要介绍了Vuex入门学习之Getter详解,Vuex 允许我们在 store 中定义 getter(可以认为是 store 的计算属性),就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,需要的朋友可以参考下
2023-11-11
解决VueCil代理本地proxytable无效报错404的问题
这篇文章主要介绍了解决VueCil代理本地proxytable无效报错404的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
这篇文章主要介绍了Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue 批量自动引入并注册组件或路由实现详解
这篇文章主要为大家介绍了vue 批量自动引入并注册组件或路由实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07