標(biāo)題可能描述不準(zhǔn)確, 大概就是這么個(gè)需求:
用 Vue-cli 搭建一個(gè)多入口, 多頁面的站點(diǎn), 也就是通過html-webpack-plugin插件會(huì)生成多個(gè) .html 文件, 在默認(rèn)下, 是只有 index.html 這個(gè)入口可以用 history 模式, 如: http://www.xxx.com/xxx/xxx, 而其他的入口只能用 hash 模式, 如: http://www.xxx.com/admin.html#/xxx/xxx, 因?yàn)閣ebpack-dev-middleware會(huì)將所有的路由都指向 index.html 文件, 假如線上的時(shí)候, 都需要 history 模式, 這樣多少會(huì)造成麻煩.
真是太二了, 剛寫完文章就發(fā)現(xiàn)connect-history-api-fallback這個(gè)插件就是做這個(gè)的...
方法更新如下:
修改 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'}, // 默認(rèn)入口 { from: ///backend/, to: '/backend.html'}, // 其他入口 { from: /^//backend//.*$/, to: '/backend.html'}, ]}))具體規(guī)則就參考: https://github.com/bripkens/connect-history-api-fallback
-------------- 以下代碼請(qǐng)無視 --------------
下面我們就來改造下, 讓所有入口都支持 history 模式:
1. 首先, 我們?cè)?build 目錄下建立個(gè) setup-dev-server.js 文件, 里面代碼如下:
const path = require('path')const webpack = require('webpack')const clientConfig = require('./webpack.dev.conf') // 引入開發(fā)環(huán)境下的 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) // 關(guān)鍵代碼開始 // 因?yàn)殚_發(fā)環(huán)境下, 所有的文件都在內(nèi)存里, 包括由 html-webpack-plugin 生成的 .html 文件, 所以我們需要用 webpack-dev-middleware 提供的 api 從內(nèi)存里讀取 clientCompiler.plugin('done', () => { const fs = devMiddleware.fileSystem // 訪問內(nèi)存 const filePath = path.join(clientConfig.output.path, 'index.html') // 讀取的文件, 文件名和 html-webpack-plugin 生成的文件名要求一致 if (fs.existsSync(filePath)) { // 判斷下文件是否存在 const index = fs.readFileSync(filePath, 'utf-8') // 從內(nèi)存里取出 opts.indexUpdated(index) // 將取出的文件通過 indexUpdated 函數(shù)返回, 這個(gè)函數(shù)怎么來的, 后面會(huì)說明 } const adminPath = path.join(clientConfig.output.path, 'backend.html') // 同上, 這是第二個(gè)入口生成的 .html 文件, 如果還有其他入口, 這個(gè)多復(fù)制幾份 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) // 當(dāng)修改 html-webpack-plugin 模版時(shí), 自動(dòng)刷新整個(gè)頁面 clientCompiler.plugin('compilation', function(compilation) { compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) { hotMiddleware.publish({ action: 'reload' }) cb() }) })}2. 修改 build/dev-server.js 文件
主要修改文件中var app = express()到module.exports = app.listen(port, function (err) {之間的代碼
var app = express()var indexHTMLvar adminHTML// 引用前面創(chuàng)建的文件, 并將兩個(gè)保存內(nèi)容的函數(shù)傳過去, 這里保存內(nèi)容的變量寫成對(duì)象或者數(shù)組也可以, 還可以少點(diǎn)代碼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))})// 設(shè)置靜態(tài)文件夾路由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) {3. npm run dev 開始愉快的寫代碼吧
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注