标题可能描述不准确, 大概就是这么个需求:
用 Vue-cli 搭建一个多入口, 多页面的站点, 也就是通过html-webpack-plugin插件会生成多个 .html 文件, 在默认下, 是只有 index.html 这个入口可以用 history 模式, 如: http://www.xxx.com/xxx/xxx, 而其他的入口只能用 hash 模式, 如: http://www.xxx.com/admin.html#/xxx/xxx, 因为webpack-dev-middleware会将所有的路由都指向 index.html 文件, 假如线上的时候, 都需要 history 模式, 这样多少会造成麻烦.
真是太二了, 刚写完文章就发现connect-history-api-fallback这个插件就是做这个的...
方法更新如下:
修改 build/dev-server.js 文件
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'},
]
}))
具体规则就参考: https://github.com/bripkens/connect-history-api-fallback
-------------- 以下代码请无视 --------------
下面我们就来改造下, 让所有入口都支持 history 模式:
1. 首先, 我们在 build 目录下建立个 setup-dev-server.js 文件, 里面代码如下:
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()
})
})
}
内容版权声明：除非注明，否则皆为本站原创文章。