NextJS - 导出被破坏（没有 CSS，没有 JS）

Question

我正在使用 NextJS ( https://nextjs.org/ ) 9.0.6 版。

我的 next.config.js 看起来像这样：

/* eslint-disable */
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables // make your antd custom effective
  },
  webpack: (config, {
    isServer,
    defaultLoaders
  }) => {
    const originalEntry = config.entry;
    config.entry = async() => {
      const entries = await originalEntry();

      if (
        entries["main.js"] &&
        !entries["main.js"].includes("./polyfills.js")
      ) {
        entries["main.js"].unshift("./polyfills.js");
      }

      return entries;
    };

    config.module.rules.push({
      test: /\.scss$/,
      use: [
        defaultLoaders.babel,
        {
          loader: require("styled-jsx/webpack").loader,
          options: {
            type: "scoped",
            javascriptEnabled: true
          }
        },
        "sass-loader"
      ]
    });

    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === "function") {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === "function" ? [] : origExternals)
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: "null-loader"
      });
    }
    return config;
  }
});

我的 package.json 看起来像这样：

{
  "name": "test",
  "version": "0.0.1beta",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },
  "dependencies": {
    "@material/react-chips": "^0.15.0",
    "@zeit/next-less": "^1.0.1",
    "antd": "^3.24.3",
    "babel-plugin-import": "^1.12.2",
    "less": "3.10.3",
    "less-vars-to-js": "1.3.0",
    "next": "9.0.6",
    "null-loader": "3.0.0",
    "react": "^16.11.0",
    "react-country-flag": "^1.1.0",
    "react-device-detect": "^1.9.10",
    "react-dom": "^16.11.0",
    "react-proptypes": "^1.0.0",
    "react-redux": "^7.1.1",
    "react-string-replace": "^0.4.4",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-persist": "^6.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.16.0",
    "node-sass": "^4.13.0",
    "prettier": "^1.18.2",
    "prettier-eslint": "^9.0.0",
    "sass-loader": "8.0.0"
  },
  "license": "ISC"
}

我做了什么：

- 删除了 out 和 .next 文件夹。

然后：

yarn build
yarn export

页面将生成，但它们已损坏（未加载 CSS，没有 Javascript）。

这在项目开始时有效，但没有。

这里有人知道为什么它会被打破吗？

Answer 1

我刚刚遇到了同样的问题并提出了这个问题。我认为塔哈正确地解释了这个问题，但对我来说，一个小小的调整就达到了next.config.js目的：

module.exports = {
  assetPrefix: './'
}

NextJS 文档中也描述了该主题。

Answer 2

最近，我在尝试导出应用程序的静态版本时遇到了同样的问题，并且惊讶地发现 Next.js 存储库上最近没有关于该问题的问题。

实际上，当通过 Web 服务器运行时，使用 CSS/Js 文件的绝对路径可以正常工作。当在浏览器中作为本地文件运行时，您必须自己将它们更改为相对路径。

至于为什么 Next.js 团队不提供使用本地路径导出的选项，Tim Neutkens（首席维护者）在本期中表示，“这将涉及大量工作，但收益却微乎其微”。

Answer 3

当我遇到同样的问题时，我遇到了这个问题，我已经弄清楚了。

在您的index.html文件中（在out目录中），找到link文件开头的标签：

<link
      rel="preload"
      href="/_next/static/css/d849fb1b42015bc13208.css"
      as="style"
/>

<link
      rel="stylesheet"
      href="/_next/static/css/d849fb1b42015bc13208.css"
      data-n-g=""
/>

只需.在href属性开头添加一个点“ ” ，如下所示：

<link
      rel="preload"
      href="./_next/static/css/d849fb1b42015bc13208.css"
      as="style"
/>
<link
      rel="stylesheet"
      href="./_next/static/css/d849fb1b42015bc13208.css"
      data-n-g=""
/>

这为我修好了。

我不知道为什么.默认情况下不包含“ ”。