如何更改资产、图像等的基本路径

Question

我需要我的应用程序在主域的子文件夹中运行良好。正是在这里 起初我有很多脚本、css 和图像未加载的错误。

我在 next.config.js 中添加了以下内容：

basePath: "/out",

现在脚本和 css 在导出时运行良好，它们在路径中包含 /out/。

但是，这些文件的路径中还没有 /out/，因此它们会给出 404 错误。

我试图按照本教程进行操作，但看起来我仍然做错了什么，

我的 next.config.js 现在是：

const path = require("path");

module.exports = {
  trailingSlash: true,
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },

  basePath: "/out",
  assetPrefix: process.env.BASE_PATH || '',
  publicRuntimeConfig: {
    basePath: process.env.BASE_PATH || '',
  },
};

package.json 的相关部分是：

"scripts": { "dev": "node server.js -p $PORT", "build": "next build", "prod": "BASE_PATH=/out next build && next export", "start": " NODE_ENV=生产节点 server.js -p $PORT", "start2": "next start" },

server.js 是：

const express = require('express');
const next = require('next');
const path = require('path');
const bodyParser = require('body-parser');
const keys = require("./server/config/keys");
const stripe = require('stripe')(keys.stripeSecretKey);
const routes = require('./routes');

const dev = process.env.NODE_ENV !== 'production';

const app = next({ dir: '.', dev });
const handle = routes.getRequestHandler(app);

app.prepare().then(() => {
    const server = express();
        // Static files
        // https://github.com/zeit/next.js/tree/4.2.3#user-content-static-file-serving-eg-images
    server.use('/images', express.static(path.join(__dirname, 'images'), {
        maxAge: dev ? '0' : '365d'
    }));

    server.use(bodyParser.json());

    server.get('*', (req, res) => {
        return handle(req, res)
    });

    server.post('/api/stripe/checkout', async (req, res) => {
        await stripe.charges.create({
            amount: req.body.amount,
            currency: 'usd',
            description: 'Mojosa - React Next Landing Page Templates',
            source: req.body.token.id
        });
        res.send({})
    });

    const PORT = process.env.PORT || 3000;

    server.listen(PORT, (err) => {
        if (err) throw err
        console.log(`> Read on http://localhost:${PORT}`)
    });
})

这是组件中图像的示例：

<div className="col-lg-6 col-md-12">
    <div className="book-image">
    <img src='/images/book-img.png' alt="image" />
</div>

使用此配置：

• 导出 - 上传到实时网站时，/out/ 文件夹上的下一个构建 && 下一个导出运行良好，但图像显示 404
• DEV 或 BUILD 他们给出 404 并且工作比在真实域上发布的 EXPORT 站点差得多。如果我删除basePath: "/out",开发模式效果很好

问题： 如何将 /out/ 路径添加到所有图像/资产中？我可以在导出时重新添加 basePath: "/out",`。

Answer 1

也刚碰到这个。您需要使用 basePath（图像、字体等）手动为公共文件夹中的任何内容添加前缀

文档 “公共文件夹中的文件；如果您想通过 CDN 提供这些资产，则必须自己引入前缀”

<div className="col-lg-6 col-md-12">
    <div className="book-image">
    <img src={`${process.env.BASE_PATH}/images/book-img.png`} alt="image" />
</div>