关于vue-cli搭建的webpack单页面应用框架改写多页面应用框架的心得

最近由于工作需要，需要自己搭建一套vue多页面的前端应用框架，以前都是用现成的，不过这套现成的框架，集成了太多的冗余的插件，而且不能直接通过指令‘npm run dev’实现热加载，需要通过虚拟服务器linux系统运行watch指令，比较麻烦，而且针对不用开发环境，有可能运行不了，所以这样的一套框架再运用到新的项目中感觉会降低工作效率。

这次借助新项目的开展，就自己动手研究了一天，在vue-cli脚手架创建框架的基础上进行webpack配置项的调整，配置出了一套可以开展多页面跳转的应用框架。废话不多说了，进入正题。

首先，第一步执行脚手架指令 vue init webpack vue-multipage-webapp，创建项目 vue-multipage-webapp，按照官网的标准步骤进行下去，直到可运行项目。项目结构目录为：

其次就是修改webpack，打开文件夹build

对webpack.base.conf.js进行如下配置：

页面入口entry配置，app和home属性在下面的配置中会作为每个页面的引用的js用到，为了便于大家操作使用，贴上源码：

entry: {
    app: './src/main.js',               //index页面入口
    home: './src/common/js/home.js'    //新页面入口
}

接下来是对webpack.dev.conf.js进行配置调整：

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks:['manifest','vendor','app'],    //此处配置不可遗漏
}),
new HtmlWebpackPlugin({
      filename: 'home.html',                      //打包和调用的新页面的名称
      template: './src/pages/home/index.html',    //新页面引入路径（此处的路径一定要配置正确，否则会出错）
      inject: true,
      chunks:['manifest','vendor','home'],        //此处chunks配置注意manifest,vendor别遗漏（webpack中若有配置这两项，则必须加上，否则打包运行的项目代码跳转到对应页面中控制台会出现报错：webpackJsonp is not defined）
}),

以上chunks的参数值就是上面说明的入口文件中特别提到的参数属性

最后，webpack.pro.conf.js的配置调整：

//主页index.html
new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      chunks:['manifest','vendor','app'],    //此处配置不可遗漏
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
}),
//home.html配置
new HtmlWebpackPlugin({
      filename: config.build.home,    //文件夹config中的index.js进行设置
      template: 'src/pages/home/index.html',
      inject: true,
      chunks:['manifest','vendor','home'],    //此处配置不可遗漏
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
}),

通过以上配置，如果没有其他出入的话，新页面应该可以和index.html相同调用了，即：http://localhost:8080/home.html，在项目正常运行的情况下，该页面配置成功，再配置其他页面和上面操作类似即可。

项目代码的结构未作详细说明，只是将需要配置的点罗列了下，有兴趣了解全部源码内容可以下载：源码地址

源码下载后先浏览下readme，里面还有axios封装，以及如何调用。算是给大家的彩蛋了，哈哈！