vue+webpack多页面应用

vue+webpack多页面应用

从git上初始化的vue项目框架是单页面的。单页面应用能够实现大部分页面web应用开发。若要用到多页面须要须要配置。这篇文章就说说怎么应用多页面应用。
多页面应用就是几个单页面应用在一块儿。
这篇文章使用的是vue2.+,webpack3.+
总共有5步
咱们从安装好一个单页面应用提及。

一、 建立一个vue项目。

二、 建立模板html文件，入口文件，vue文件。

通常在根据目录下面有一个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插件配置。如：

tip

能用单页面应用的，不使用多页面应用。基本上单页面都能解决问题。页面跳转可使用this.$router.push(....)搞定。

---

2018/05/22 by stone