溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
標題可能描述不準確, 大概就是這么個需求:
用 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()
})
})
}
2. 修改 build/dev-server.js 文件
主要修改文件中var app = express()到module.exports = app.listen(port, function (err) {之間的代碼
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) {
3. npm run dev 開始愉快的寫代碼吧
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
