详解如何将 Vue-cli 改造成支持多页面的 history 模式

app.use(require('connect-history-api-fallback')())

var history = require('connect-history-api-fallback')app.use(history({  rewrites: [    { from: 'index', to: '/index.html'}, // 默认入口    { from: ///backend/, to: '/backend.html'}, // 其他入口    { from: /^//backend//.*$/, to: '/backend.html'},  ]}))

const path = require('path')const webpack = require('webpack')const clientConfig = require('./webpack.dev.conf') // 引入开发环境下的 webpack 配置文件module.exports = function setupDevServer(app, opts) {  const clientCompiler = webpack(clientConfig)  // 加载 webpack-dev-middleware 插件  const devMiddleware = require('webpack-dev-middleware')(clientCompiler, {    publicPath: clientConfig.output.publicPath,    stats: {      colors: true,      chunks: false    }  })  app.use(devMiddleware)  // 关键代码开始  // 因为开发环境下, 所有的文件都在内存里, 包括由 html-webpack-plugin 生成的 .html 文件, 所以我们需要用 webpack-dev-middleware 提供的 api 从内存里读取  clientCompiler.plugin('done', () => {    const fs = devMiddleware.fileSystem // 访问内存    const filePath = path.join(clientConfig.output.path, 'index.html') // 读取的文件, 文件名和 html-webpack-plugin 生成的文件名要求一致    if (fs.existsSync(filePath)) { // 判断下文件是否存在      const index = fs.readFileSync(filePath, 'utf-8') // 从内存里取出      opts.indexUpdated(index) // 将取出的文件通过 indexUpdated 函数返回, 这个函数怎么来的, 后面会说明    }    const adminPath = path.join(clientConfig.output.path, 'backend.html') // 同上, 这是第二个入口生成的 .html 文件, 如果还有其他入口, 这个多复制几份    if (fs.existsSync(adminPath)) {      const admin = fs.readFileSync(adminPath, 'utf-8')      opts.adminUpdated(admin)    }  })  // 加载热重载模块  app.use(require('webpack-hot-middleware')(clientCompiler))  var hotMiddleware = require('webpack-hot-middleware')(clientCompiler)  // 当修改 html-webpack-plugin 模版时, 自动刷新整个页面  clientCompiler.plugin('compilation', function(compilation) {    compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {      hotMiddleware.publish({        action: 'reload'      })      cb()    })  })}

var app = express()var indexHTMLvar adminHTML// 引用前面创建的文件, 并将两个保存内容的函数传过去, 这里保存内容的变量写成对象或者数组也可以, 还可以少点代码require('../config/setup-dev-server')(app, {  indexUpdated: index => {    indexHTML = index  },  adminUpdated: index => {    adminHTML = index  },})// 加载反向代理Object.keys(proxyTable).forEach(function(context) {  var options = proxyTable[context]  if (typeof options === 'string') {    options = {      target: options    }  }  app.use(proxyMiddleware(context, options))})// 设置静态文件夹路由var staticPath = path.posix.join(config.assetsPublicPath, config.assetsSubDirectory)app.use(staticPath, express.static('./static'))// 入口1路由app.get(['/', '/category/:id'], (req, res) => {  res.send(indexHTML)})// 入口2路由app.get(['/backend', '/backend/*'], (req, res) => {  res.send(adminHTML)})// 404 页面app.get('*', (req, res) => {  res.send('HTTP STATUS: 404')})app.use(function(req, res, next) {  var err = new Error('Not Found')  err.status = 404  next(err)})app.use(function(err, req, res) {  res.status(err.status || 500)  res.send(err.message)})module.exports = app.listen(port, function(err) {