如何为静态导出的 NextJS 应用程序设置 basePath

Posted 2023-03-07

【中文标题】如何为静态导出的 NextJS 应用程序设置 basePath

【英文标题】：How to set basePath for a static exported NextJS app

【发布时间】：2021-08-30 07:38:23

【问题描述】：

我需要构建一个 React / NextJS 应用程序并将其部署到具有特定上下文的 Weblogic J2ee 服务器。我有一些 React 经验，但我的第一步是使用 NextJS。

目前的构建/验证步骤是；

创建一个普通的 NextJS 应用程序

添加 next.config.js 和 module.export 以更改基本路径

module.exports = basePath: '/测试'

执行npm run dev应用程序在'http://localhost:3000/test'上可用

在package.json中添加导出脚本"export": "next build && next export"支持静态导出

在下面添加导出以解决问题 21079

//https://github.com/vercel/next.js/issues/21079
module.exports = 
  images: 
    loader: "imgix",
    path: "",
  

执行 npm run export 以创建静态 html 导出。导出成功完成到out 文件夹。 检查out 文件夹中的index.html 时，对静态内容的所有引用仍以/_next/static 开头，而不是/test/_next/static。

所以这可能是对我的误解，如果我在这里错了，请纠正我。

为了能够在 J2EE 应用服务器上测试 vanilla 应用程序，它必须被打包到一个 war 文件中。为此，我将文件 warpack/warpack.ts 添加到项目中。

    const fs = require('fs');
    const archiver = require('archiver');
    const rimraf = require('rimraf') ;
    
    const distFolder = 'dist' ;
    const warFile = distFolder + '/test.war';
    const buildFolder = 'out';
    const contextRoot = 'test';
    
    // Destroy dist folder
    rimraf(distFolder, (error) =>  
        if (!error)        
            // Create dist folder
            if (!fs.existsSync(distFolder))
                fs.mkdirSync(distFolder);
            
        
            const output = fs.createWriteStream(warFile);
            const archive = archiver('zip', );
        
            output.on('close', () => 
                console.log('war (' + warFile + ') ' + archive.pointer() + ' total bytes');
            );
        
            // write archive to output file
            archive.pipe(output);
            // add build folder to archive
            archive.directory(buildFolder,'');
            // add weblogic.xml
            const weblogicXML = '<?xml version="1.0" encoding="UTF-8"?><weblogic-web-app xmlns="http://xmlns.oracle.com/weblogic/weblogic-web-app" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:schemaLocation="http://xmlns.oracle.com/weblogic/weblogic-web-app http://xmlns.oracle.com/weblogic/weblogic-web-app/1.2/weblogic-web-app.xsd"><weblogic-version>10.3.6</weblogic-version><context-root>' + contextRoot '</context-root><description>Test NextJS</description></weblogic-web-app>'
            archive.append(weblogicXML, name: 'WEB-INF/weblogic.xml' );
        
            const manifestMF = 'Manifest-Version: 1.0\nBuild-Tag: 0.0.1-SNAPSHOT\nWeblogic-Application-Version: 0.0.1-SNAPSHOT';
            archive.append(manifestMF, name: 'META-INF/MANIFEST.MF' );
        
            archive.finalize();
        
         else 
            console.log('Failed to delete "' + distFolder + '" folder.') ;
            process.exit(1);
        ;
    );

为webpack.ts安装了所需的包

npm install fs --save-dev npm install rimraf --save-dev npm install archiver --save-dev

添加了脚本"warpack": "next build && next export && node warpack/warpack.ts" 来构建、导出静态应用并将其打包到战争中。

部署war文件后，页面可以在http://something/test上加载，但显示一个空白页面。 网络开发工具表明请求是向应用服务器的根目录发出的，而不是向配置的基本路径发出的。

  GET http://host:8001/static/css/main.09371e9d.chunk.css     net::ERR_ABORTED 404 (Not Found)
  GET http://host/static/js/2.0850eeb7.chunk.js net::ERR_ABORTED 404 (Not Found)
  GET http://host/static/js/main.dc0c945b.chunk.js net::ERR_ABORTED 404 (Not Found)

​

【参考方案1】：

过于关注 basePath 值，而不是 next.config.js 的正确语法。 next.config.js 中的第二个模块导出首先被覆盖。

错误

module.exports =  
  basePath: '/test' 


//https://github.com/vercel/next.js/issues/21079
module.exports = 
  images: 
    loader: "imgix",
    path: "",
  

正确

module.exports =  
  basePath: '/test',
  assetPrefix: "/test/",

  //https://github.com/vercel/next.js/issues/21079
  images: 
    loader: "imgix",
    path: ""