Comment transformer Vue-cli en un mode historique prenant en charge plusieurs pages

Cet article présente principalement en détail comment transformer Vue-cli en un mode historique prenant en charge plusieurs pages. Il a une certaine valeur de référence. J'espère qu'il pourra aider tout le monde.

Le titre n'est peut-être pas exact, mais c'est probablement l'exigence :

Utilisez Vue-cli pour créer un site multi-entrées et multipages, c'est-à-dire via le Plug-in html-webpack-plugin Plusieurs fichiers .html seront générés Par défaut, seule l'entrée index.html peut utiliser le mode historique, tel que : http://www.xxx.com/xxx/xxx, tandis que les autres entrées. ne peut utiliser que le mode hachage. Par exemple : http://www.xxx.com/admin.html#/xxx/xxx, car webpack-dev-middleware pointera toutes les routes vers le fichier index.html, s'il est en ligne, Le mode historique est requis. Cela va causer quelques problèmes.

C'est vraiment bizarre Juste après avoir fini d'écrire l'article, j'ai découvert que le plug-in connect-history-api-fallback fait ça...

Méthode de mise à jour comme suit :

Modifier le fichier build/dev-server.js

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

en

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'},
  ]
}))

Pour les règles spécifiques, veuillez vous référer à : https://github.com/bripkens/connect-history-api-fallback

---- ---------- Veuillez vous référer au code suivant Ignorer-------------

Apportons quelques modifications pour que toutes les entrées prennent en charge le mode historique :

1. Tout d'abord, nous créons un répertoire dans le répertoire build. Créez un fichier setup-dev-server.js avec le code suivant :

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. Modifiez le fichier build/dev-server.js

Modifiez principalement le code dans le fichier entre var app = express() en 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 Commencez à écrire du code avec bonheur

Recommandations associées :

Quoi est le mode Historique HTML5

Explication détaillée du mode Historique en HTML5

Plusieurs méthodes d'historique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!