NextJS-导出已损坏(没有CSS,没有JS)

我正在使用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,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)。

这在项目开始时有效,但是不行。

这里有人知道为什么会损坏它吗?

santong126 回答:NextJS-导出已损坏(没有CSS,没有JS)

当我遇到同样的问题时,我遇到了这个问题,我已经解决了。

在您的 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=""
/>

这为我修好了。

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

,

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

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

至于为什么 Next.js 团队不提供使用本地路径导出的选项,Tim Neutkens(主要维护者)表示 in this issue “这将涉及大量工作以获得非常小的收益”。

,

我刚刚遇到了同样的问题并提出了这个问题。 我认为 Taha 正确地解释了这个问题,但对我来说,next.config.js 中的一个小改动就成功了:

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

该主题也在 NextJS docs 中进行了描述。

本文链接:https://www.f2er.com/3130938.html

大家都在问