So verwandeln Sie Vue-cli in einen Verlaufsmodus, der mehrere Seiten unterstützt

In diesem Artikel wird hauptsächlich detailliert beschrieben, wie man Vue-cli in einen Verlaufsmodus umwandelt, der mehrere Seiten unterstützt. Ich hoffe, dass er jedem helfen kann.

Der Titel ist möglicherweise nicht korrekt, aber dies ist wahrscheinlich die Anforderung:

Verwenden Sie Vue-cli, um eine Website mit mehreren Einträgen und mehreren Seiten zu erstellen, d. h. über die html-webpack-plugin-Plugin Es werden mehrere .html-Dateien generiert. Standardmäßig kann nur der index.html-Eintrag den Verlaufsmodus verwenden, z. B.: http://www.xxx.com/xxx/xxx, während andere Einträge kann nur den Hash-Modus verwenden, zum Beispiel: http://www.xxx.com/admin.html#/xxx/xxx, da webpack-dev-middleware alle Routen auf die Datei index.html verweist, wenn diese online ist. Der Verlaufsmodus ist erforderlich. Dies wird einige Probleme verursachen.

Es ist wirklich seltsam, nachdem ich den Artikel fertig geschrieben hatte, entdeckte ich, dass das Connect-History-API-Fallback-Plugin dies tut...

Methodenaktualisierung wie folgt:

Ändern Sie die Datei build/dev-server.js

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

in

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

Spezifische Regeln finden Sie unter: https://github.com/bripkens/connect-history-api-fallback

---- ---------- Bitte beziehen Sie sich auf den folgenden Code. Ignorieren--------------

Nehmen wir einige Änderungen vor, damit alle Einträge den Verlaufsmodus unterstützen:

1. Zuerst erstellen wir ein Verzeichnis im Build-Verzeichnis. Erstellen Sie eine setup-dev-server.js-Datei mit dem folgenden Code:

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. Ändern Sie die Datei build/dev-server.js

Ändern Sie hauptsächlich den Code in der Datei zwischen var app = express() bis 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 Beginnen Sie mit dem Schreiben von Code

Verwandte Empfehlungen:

Was ist der HTML5-Verlaufsmodus

Detaillierte Erklärung des Verlaufsmodus in HTML5

Mehrere Verlaufsmethoden

Das obige ist der detaillierte Inhalt vonSo verwandeln Sie Vue-cli in einen Verlaufsmodus, der mehrere Seiten unterstützt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!