詳解如何將 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 indexHTML
var 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) {