Vue-cli を複数ページをサポートする履歴モードに変換する方法

この記事では主に Vue-cli を複数ページをサポートする履歴モードに変換する方法を詳しく紹介します。興味のある方はぜひ参考にしてください。

タイトルは正確ではないかもしれませんが、おそらく要件です:

Vue-cli を使用して複数エントリ、複数ページのサイトを構築します。つまり、複数の .html ファイルが html-webpack を通じて生成されます。 -plugin プラグイン。デフォルトでは、http://www.xxx.com/xxx/xxx のような、index.html エントリのみが履歴モードを使用できます。一方、他のエントリは、次のようなハッシュ モードのみを使用できます。 http://www.xxx.com/admin.html#/xxx/xxx、webpack-dev-middleware がすべてのルートをindex.html ファイルにポイントするため、履歴モードが必要となり、問題が発生します。大変です。

本当に多すぎます。次に、記事を書き終えたところ、connect-history-api-fallback プラグインがこれを行うことを発見しました...

メソッドは次のように更新されます:

ビルドを変更する/dev-server.js ファイル

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

Change become

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

--- ----------- 次のコードは無視してください- -------------

次に、すべてのエントリが履歴モードをサポートするようにいくつかの変更を加えてみましょう:

まず 1. 、ビルド ディレクトリ ファイルに 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 間のコード 楽しくコードを書き始めましょう

関連する推奨事項:

HTML5ヒストリーモードとは

HTML5のヒストリーモードの詳細な説明

ヒストリーのいくつかの方法

以上がVue-cli を複数ページをサポートする履歴モードに変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。