摘要：多页面应用就是几个单页面应用在一起。这篇文章使用的是总共有步我们从安装好一个单页面应用说起。在多页面应用中，因为有多个应用模板，所以建议把应用模板放在一个文件夹里。例如创建每个单页面应用的入口文件。如能用单页面应用的，不使用多页面应用。
vue+webpack多页面应用
从git上初始化的vue项目框架是单页面的。单页面应用可以实现大部分页面web应用开发。若要用到多页面需要需要配置。这篇文章就说说怎么应用多页面应用。
多页面应用就是几个单页面应用在一起。
这篇文章使用的是vue2.+,webpack3.+
总共有5步
我们从安装好一个单页面应用说起。
一般在根据目录下面有一个index.html文件。它是页面的html模板文件。一个模板文件就是一个单页面应用，按需创建模板。
在多页面应用中，因为有多个应用模板，所以建议把应用模板html放在一个文件夹里。不放也没关系。例如：
创建每个单页面应用的入口文件。（*.js）
每一个单页面的三个文件（.js, .vue, *.html）都得对应上。
因为webpack有2个环境（1.开发环境。2.生产环境。）所以这2个环境都需要配置。这步是作用于开发环境的。
打开webpack.base.conf.js文件。在入口选项中输入入口文件的路径及变量名。如：
打开webpack.dev.conf.js文件。在plugins选项中设置各单页面应用的htmlwebpackplugin配置。记得修改首页的配置。如：
在index.js文件中的build选项中设置模板路径。如：
在webpack.prod.conf.js文件。在plugins选项中设置各单页面应用的htmlwebpackplugin配置。在首页的配置中添加了chunksSortMode,chunks选项。添加各页面的htmlwebpackplugin插件配置。如：
能用单页面应用的，不使用多页面应用。基本上单页面都能解决问题。页面跳转可以使用this.$router.push(....)搞定。
2018/05/22 by stone
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95184.html
摘要：首先看下的代码编译前删除之前编译生成的静态资源首先需要改的是入口文件，因为是多页面应用，需要多个入口文件来保证打包成不同的。 一.项目简介 本项目使用vue作为前端框架，thinkJs作为后端框架，构建个人博客网站，页面分为博客展示和后台管理，主要目的是学习使用thinkJs。现在只完成了主要的博客增删改功能，发现webpack的配置遇到了一些坑，这里先记录下。项目目录结构如下...
摘要：首先看下的代码编译前删除之前编译生成的静态资源首先需要改的是入口文件，因为是多页面应用，需要多个入口文件来保证打包成不同的。 一.项目简介 本项目使用vue作为前端框架，thinkJs作为后端框架，构建个人博客网站，页面分为博客展示和后台管理，主要目的是学习使用thinkJs。现在只完成了主要的博客增删改功能，发现webpack的配置遇到了一些坑，这里先记录下。项目目录结构如下...
摘要：本文记录了用搭建项目后，配置成多页面应用的过程。项目地址首先全局安装创建初始项目创建后默认是一个单页面应用，在默认结构的基础上将目录结构改为如下形式。其中目录下的和就是多页面应用中的两个页面。 vue-multi-pages 本文记录了用@vue/cli+webpack搭建项目后，配置成多页面应用的过程。 项目地址：https://github.com/mandyshen9... 首先...
摘要：而多页面应用的入口文件是所有需要用到的页面。单文件应用和多文件应用上，是大同小异的，区别就讨论到这里了。 1.前言 这几天，都遇到过有人问过相似的问题，就是用vue和webpack搭建目录的时候，怎么把单页面应用的配置改成多文件应用，或者是怎么把多文件应用的配置改成单文件应用。这个情况，我之前有处理过，公司的同事教过我，我就针对这个情况写下此篇文章。各位如果觉得我哪里写得不够好，写错了...
摘要：也就是说，我们需要做一个非单页应用的工程化项目。现在这个项目的静态资源是以文件哈希值来控制的。这个该怎么解决呢感谢，我们可以通过如下的配置来实现意思就是如果图片是在中引用的则不加哈希值，在文件中引入的则加上。 最近金拱门比较火，我们先戳开它的官网看看。 看完后，如果你老板要是让你做这么一个网站，一定要seo，一定要兼容IE，你会怎么去做呢？ 用vue/react吧，单页应用满足不了se...
阅读 2907·2021-11-17 09:33
阅读 1629·2021-10-12 10:13
阅读 2424·2021-09-22 15:48
阅读 2310·2019-08-29 17:19
阅读 2586·2019-08-26 11:50
阅读 1564·2019-08-26 10:37
阅读 1731·2019-08-23 16:54
阅读 2915·2019-08-23 14:14
