添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
刀枪不入的熊猫  ·  matlab ...·  1 年前    · 
爽快的红烧肉  ·  The Art Of The Double ...·  1 年前    · 
严肃的沙发  ·  X-MOL·  1 年前    · 
done ( builder ) { const extraFilePath = path . join ( builder . nuxt . options . buildDir , 'extra-file' fs . writeFileSync ( extraFilePath , 'Something extra' )

在内部,hooks 遵循使用冒号的命名模式(例如, build:done )。为了便于配置,当使用 nuxt.config.js (如上所示)设置自己的钩子时,可以将它们构造为分层对象。有关它们如何工作的更多详细信息,请参考 Nuxt Internals

hooks 列表

  • Nuxt hooks
  • Renderer hooks
  • ModulesContainer hooks
  • Builder hooks
  • Generator hooks
  • 不在 root 上时重定向到 router.base

    Let´s say you want to serve pages as /portal instead of / . 假设您希望将页面作为 /portal 而不是 / 来提供。这可能是一个边缘情况, nuxt.config.js router.base 用于当 Web 服务器,服务 Nuxt 而不是域根目录时。

    但是当在本地开发时,遇到 localhost ,当 router.base 不是 / 返回 404 时。为了防止这种情况,你可以设置一个 Hook。

    也许重定向不是生产网站的最佳用例,但这将有助于您利用 Hooks。

    首先,你 可以 改变 router.base ;更新你的 nuxt.config.js:

    // nuxt.config.js
    import hooks from './hooks'
    export default {
      router: {
        base: '/portal'
      hooks: hooks(this)
    

    然后,创建一些文件;

    hooks/index.js, Hooks 模块

    // file: hooks/index.js
    import render from './render'
    export default nuxtConfig => ({
      render: render(nuxtConfig)
    

    hooks/render.js, 渲染 hook

    // file: hooks/render.js
    import redirectRootToPortal from './route-redirect-portal'
    export default nuxtConfig => {
      const router = Reflect.has(nuxtConfig, 'router') ? nuxtConfig.router : {}
      const base = Reflect.has(router, 'base') ? router.base : '/portal'
      return {
         * 'render:setupMiddleware'
         * {@link node_modules/nuxt/lib/core/renderer.js}
        setupMiddleware(app) {
          app.use('/', redirectRootToPortal(base))
    

    hooks/route-redirect-portal.js, 中间件本身

    // file: hooks/route-redirect-portal.js
     * Nuxt middleware hook to redirect from / to /portal (or whatever we set in nuxt.config.js router.base)
     * Should be the same version as connect
     * {@link node_modules/connect/package.json}
    import parseurl from 'parseurl'
     * Connect middleware to handle redirecting to desired Web Applicatin Context Root.
     * Notice that Nuxt docs lacks explaning how to use hooks.
     * This is a sample router to help explain.
     * See nice implementation for inspiration:
     * - https://github.com/nuxt/nuxt.js/blob/dev/examples/with-cookies/plugins/cookies.js
     * - https://github.com/yyx990803/launch-editor/blob/master/packages/launch-editor-middleware/index.js
     * [http_class_http_clientrequest]: https://nodejs.org/api/http.html#http_class_http_clientrequest
     * [http_class_http_serverresponse]: https://nodejs.org/api/http.html#http_class_http_serverresponse
     * @param {http.ClientRequest} req Node.js internal client request object [http_class_http_clientrequest]
     * @param {http.ServerResponse} res Node.js internal response [http_class_http_serverresponse]
     * @param {Function} next middleware callback
    export default desiredContextRoot =>
      function projectHooksRouteRedirectPortal(req, res, next) {
        const desiredContextRootRegExp = new RegExp(`^${desiredContextRoot}`)
        const _parsedUrl = Reflect.has(req, '_parsedUrl') ? req._parsedUrl : null
        const url = _parsedUrl !== null ? _parsedUrl : parseurl(req)
        const startsWithDesired = desiredContextRootRegExp.test(url.pathname)
        const isNotProperContextRoot = desiredContextRoot !== url.pathname
        if (isNotProperContextRoot && startsWithDesired === false) {
          const pathname = url.pathname === null ? '' : url.pathname
          const search = url.search === null ? '' : url.search
          const Location = desiredContextRoot + pathname + search
          res.writeHead(302, {
            Location
          res.end()
        next()
    

    然后,每当开发中的同事到达开发 Web 开发服务/时,发生了意外情况,Nuxt 将自动重定向到/portal