vue 如何实现多页面应用（简单版）

最新推荐文章于 2024-08-20 09:18:51 发布

智慧2021

最新推荐文章于 2024-08-20 09:18:51 发布

阅读量3.1k

点赞数

分类专栏： vue小知识

本文链接： https://blog.csdn.net/weixin_38687522/article/details/118016484

版权

vue小知识专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.进入\build\webpack.base.conf.js目录下，在module.exports的域里，找到entry，在那里配置添加多个入口：
在这里插入图片描述

2.对开发环境run dev里进行修改，打开\build\webpack.dev.conf.js文件，在module.exports那里找到plugins，下面写法如下：
在这里插入图片描述

在这里插入图片描述

3.对run build也就是编译环境进行配置。首先打开\config\index.js文件，在build里加入这个：
在这里插入图片描述

4.打开/build/webpack.prod.conf.js文件，在 plugins 那里找到 HTMLWebpackPlugin
在这里插入图片描述
全部文件：

运行结果：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

智慧2021

关注关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

多页vue应用的单页面打包方法(内含打包模式的应用)

10-15

Vue CLI默认支持单页面应用（SPA）的打包，但对于多页应用（MPA），我们需要在`vue.config.js`中配置`pages`字段，列出所有页面的入口文件。例如： ```javascript module.exports = { pages: { page1: './src/...

vue实现页面切换滑动效果

10-15

在Vue.js中实现页面切换滑动效果，可以借助Vue的内置组件`transition`以及`vue-router`来完成。`vue-router`用于处理页面间的路由跳转，而`transition`则负责过渡动画效果。以下将详细讲解如何实现这一功能。首先...

3 条评论您还未登录，请先登录后发表或查看评论

vue 如何实现多页面应用

晚星的博客

11-18

8375

众所都知vue是一个单页面应用，但是单页面应用最大的问题，就是首次加载的时候过慢，因为他要把所有的css，js都要下载下来后，才可以加载页面，尤其是移动端，在弱网的情况下，体验感极差尝试过很多种优化的方式，就算在优化css,js的体积，但是还是在100-200K的这么个容量，所以我想起能否用多页面应用去解决这个问题。首先你的会一些webpack 第一步: 进入\build\webpack.base.conf.js目录下，在module.exports的域里，找到entry，在那里配置添加多个入口.

vue如何实现多页面应用网页

JackieDYH的博客

09-15

3146

为每个页面创建一个 Vue 实例，这样每个页面都可以拥有自己独立的 Vue 实例，它们之间不会相互影响。总之，使用 Vue 实现多页面应用的关键是要将每个页面视为一个独立的实例，并且使用路由管理页面之间的导航。你可以使用不同的路由来实现每个页面的页面切换和导航。总的来说，实现多页面应用的核心是配置多个入口文件，为每个页面指定唯一的容器元素，以及在 HTML 模板文件中引入对应的 bundle 文件。如果你需要在多个页面上使用相同的组件和逻辑，可以将它们提取到单独的文件中，并在多个页面中导入它们。

Webpack4-Vue2 多页应用项目教程

最新发布

gitblog_00921的博客

08-20

366

Webpack4-Vue2 多页应用项目教程 webpack4-vue2-multiPage基于 webpack4 搭建 vue2 vuex 多页应用项目地址:https://gitcode.com/gh_mirrors/we/webpack4-vue2-multiPage 项目介绍本项目是一个基于 Webpack4 和 Vue2 的多页应用框架，旨在解决在需要多个不相关 H5 页面的业务场景...

vue实现多页面应用

鲁小班的博客

06-12

1320

vue实现多页面应用

vue开发多页面应用

weixin_30532987的博客

08-22

201

1、添加多页面配置在工程根路径下（package.json同目录）添加添加vue.config.js配置文件，内容为： module.exports = { pages: {　　　　 index:　'src/main.js', home: { // 应用入口配置，相当于单页面应用的main.js，必需项 ...

vue实现todolist单页面应用

11-29

在Vue.js中构建一个Todo List单页面应用是一个很好的学习实践，可以帮助初学者理解Vue的核心概念。下面我们将详细探讨如何利用Vue实现这个应用。首先，我们需要引入Vue.js库。对于初学者，通过`<script>`标签引入...

vue多页面应用

atu1111的博客

09-29

1万+

vue多页面应用配置vue多页面，生成的vue项目默认是单页面单页面和多页面的优缺点：单页面应用是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中，内容较多时首页加载速度比较慢多页面是指一个应用中有多个页面，页面跳转时是整页刷新 1.在src文件夹下新建两个页面文件夹 2.每个页面文件夹下都有基本的一个.html后缀的文件（页面模板文件），.js文件（主入口）和.vue（根组件） public下面的index

vue将单页面改造成多页面应用的方法

10-17

最近领导交我一个项目是使用 vue-cli 搭建的单页面应用。下面小编通过本文给大家介绍vue将单页面改造成多页面应用的方法，感兴趣的朋友一起看看吧

vue多页应用

像梦巧清的博客

01-15

348

首先我的结构是这样的修改文件之前需要下载一个依赖 "glob": "^7.0.3" 添加到 package.json 中的对象 devDependencies 中主要修改的是build中的四个文件第一个修改utils 文件修改的位置放置到 exports.styleLoaders 的下边 var glob = require('glob') var HtmlWebp...

vue 多页面应用项目构建

qq584852076的专栏

12-13

574

1.安装环境 ①安装node.js 并添加入环境变量PATH ②安装淘宝NPM镜像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org ③安装webpack $ npm install webpack -g ④安装vue-cli脚手架 $ npm install -g vue-cli ⑤创建项目模板...

vue配置多页面应用

lan_学习分享

06-04

1061

转载自：（留着参考，图片复制不过来） https://blog.csdn.net/stiven_lu/article/details/80271012 第一步：使用vue-cli搭建项目（注：建议安装淘宝镜像，使用cnpm执行下面操作） 1.按住shift按钮，右键点击存放项目的文件夹，点击在此处打开命令窗口。 2.在命令窗口中输入 npm install -...

Vue-router: 实现纯前端多页面应用（Vuecli+Element UI）

PaulXerxes的博客

03-18

3052

1.简介 1.1 为什么要用Vue-router 我想做一个带导航栏的简单web页面，页面的内容可以随导航栏的点击切换。第一个想法是想用webpack打包出几个页面，然后在每个页面的按钮上添加链接，但是这样做每次页面都要刷新，效率上存在很大问题，并且用户点击之后导航栏也会跟着刷新，体验不好，于是发现Vue中的Vue-router很适合实现这种简单的多页面应用。 1.2 Vue-router的两种模...

实战 Vue 之配置多页面应用