vue预渲染项目报错webpackJsonp is not defined

关注

原创最新推荐文章于 2026-08-20 11:11:42 发布 938 阅读 AI 写同款· GEO 优化 ›

SAP-NetWeaver-RFC-SDK-750-15 ( Windows 平台 ) SAP NetWeaver RFC SDK 750 Patch 15 The SAP NetWeaver Remote Function Call (RFC) Software Development Kit (SDK) offers a simplified programming model that relieves the application programmer of the necessity to deal with the difficult low level details of RFC programming. In important connectivity projects it has proven to be state-of-the-art in terms of connecting C/C++ programs with SAP backend systems. 含帮助文档 [ sap_nwrfcsdk_750_19_documentation ] zfiori studio tag-260826 立即下载

环境

vue 2.5.2、webpack 3.6.0、prerender-spa-plugin 3.4.0

遇到的问题

打包后出现的报错
在这里插入图片描述

相关代码

大部分能查到的资料都是添加chunks。但是在这里并没有生效，问题依然存在。

    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunks: ['manifest', 'vendor', 'app'],
      chunksSortMode: 'dependency'
    }),

    // 在vue-cli生成的文件的基础上，只有下面这个才是我们要配置的
    new PrerenderSPAPlugin({
      // 生成文件的路径，也可以与webpakc打包的一致。
      // 下面这句话非常重要！！！
      // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
      staticDir: path.join(__dirname, '../dist'),

      // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
      // routes: ['/', '/evaluation', '/case', '/mall', '/video', '/employ', '/expert'],
      routes: ['/'],

      // 这个很重要，如果没有配置这段，也不会进行预编译
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        // 触发渲染的时间，用于获取数据后再保存渲染结果
        // renderAfterTime: 10000,
        // 是否打开浏览器，false 是打开。可用于 debug 检查渲染结果
        headless: true,
        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
        renderAfterDocumentEvent: 'render-event'
      })
    }),

    // keep module.id stable when vendor modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks(module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),

分析

在这里插入图片描述
标红线的js。公共js在body里面。而页面js却在head头部上面。正确逻辑页面js应该在公共js的下方才能生效。这就导致了报错，直接点的解决方法就是删除head的js，或者手动移动到公共js下方。但显然不是我能接受的。
进一步分析，其实这个页面js的生成时由于路由懒加载而生成的分页js。