vue多页项目配置

前言

​ 前阵子和app端做混合开发，而我们前端使用的技术又是vue，单页肯定不行，于是就需要使用vue进行多页开发，本来这块是我同事进行修改webpack进行配置的，后来我给记录了下来，方便以后也能使用。好了，闲话不多说，开始正题了。

webpack配置

​ 初始化项目啥都不说了，直接进入webpack修改配置的步骤。

​ 首先我们初始化完项目后进入build目录中，找到webpack.base.conf.js。因为vue是单页项目，所以我们能发现入口只有一个main.js文件：

module.exports = {
  ...
  entry: {
    app: './src/main.js'
  },
  ...
}

我们要多页，那么肯定是需要多个入口的。所以等会这块配置需要做修改。

其次，我们打开webpack.prod.conf.js文件，这个文件是打包的配置的js文件，我们找到如下代码：

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
})

这块代码主要是将单页打包成正式项目，因为针对多页的打包，我们待会这里也需要做修改。

多页配置一 — pages.json

​ 要配置多页，我们这边的做法是配置一个页面数据json，比如pages.json：

{
  "page1": {
    "path": "./src/views/page1/index.js",
    "title": "页面一"
  },
  "page2": {
    "path": "./src/views/page2/index.js",
    "title": "页面二"
  },
  "page3": {
    "path": "./src/views/page3/index.js",
    "title": "页面三"
  }
}

path -> 页面主入口

title -> 对应页面的title

根据path我们创建对应的文件目录，如下图：

页面目录

以page1为例：

// index.js
import Vue from 'vue'
import Page1 from './page1'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(Page1)
})

其实就相当于把views下的每个文件夹都当做一个单页项目来开发即可。

多页配置二 — webpack

​ 上文我们说到要修改webpack.base.conf.js中的入口文件，但这么做的前提是，我们需要先通过pages.json获取到页面列表。我们将这一步操作放到build->utils.js中：

// utils.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
function getEntry () {
  return Object.entries(require('../pages.json')).map(([key, value]) => {
    return Object.assign({ key }, value)
  })
}

exports.getEntry = getEntry

// 通过循环 多页编译
exports.generateHTML = () => {
  return getEntry().map((page) => {
    return new HtmlWebpackPlugin({
      title: page.title || '',
      filename: `${page.key}.html`,
      template: page.template || 'index.html',
      inject: true,
      chunks: ['vendor', page.key],
      chunksSortMode: 'manual'
    })
  })
}
// PS：如果需要使用别的模板 可以在pages.json中页面对象中多配置一个template属性 值为模板地址，比如
//{
//    "page4": {
//        "path": "./src/views/page4/index.js",
//        "title": "页面四",
//        "template": "./src/template/template1.html"
//    }
//}

然后我们打开webpack.base.conf.js：

// webpack.base.conf.js
module.exports = {
  ...
  entry: utils.getEntry().reduce(function (o, v) {
    o[v.key] = v.path
    return o
  }, {}),
  ...
}

然后我们再配置webpack.dev.conf.js，这样我们可以直接通过localhost进行页面访问并调试：

// webpack.dev.conf.js
// 注释掉这一句
// new HtmlWebpackPlugin({
//   filename: 'index.html',
//   template: 'index.html',
//   inject: true
// }),

// 加上这一句
...utils.generateHTML(),

这样配置完后，使用yarn dev运行项目，即可通过localhost:8080/page1.html访问到对应页面的内容了。

切记，这样通过localhost访问的页面要加上.html才能正确访问

最后一步，打包的配置：

// webpack.prod.conf.js
// 在webpackConfig的plugin中注释掉以下内容
// new HtmlWebpackPlugin({
//   filename: config.build.index,
//   template: 'index.html',
//   inject: true,
//   minify: {
//     removeComments: true,
//     collapseWhitespace: true,
//     removeAttributeQuotes: true
//     // more options:
//     // https://github.com/kangax/html-minifier#options-quick-reference
//   },
//   // necessary to consistently work with multiple chunks via CommonsChunkPlugin
//   chunksSortMode: 'dependency'
// }),

// 以下是打包共用模块的内容，多页中用不少 也可注释
// new webpack.optimize.CommonsChunkPlugin({
//   name: 'manifest',
//   minChunks: Infinity
// }),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
// new webpack.optimize.CommonsChunkPlugin({
//   name: 'app',
//   async: 'vendor-async',
//   children: true,
//   minChunks: 3
// }),

// 然后加上以下代码
...utils.generateHTML(),

这样我们就大功告成了~

然后我们使用yarn build来看看打包的情况：

打包后的文件目录

这样，我们的多页就配置成功了哦~ 好嘞 大功告成！

如果打开页面是空白，可千万别忘了去config->index.js中查看下，是否将assetsPublicPath中的/配置成了./哦