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

Question

我需要我的应用在主域的子文件夹中正常运行。正是here 一开始我遇到了很多脚本、css和图片没有加载的错误。

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

basePath: "/out",

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

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

我尝试按照this 教程进行操作，但看起来我还是做错了，

我的 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 的相关部分是：

“脚本”：{ "dev": "node server.js -p $PORT", “构建”：“下一个构建”， "prod": "BASE_PATH=/out next build && next export", "start": "NODE_ENV=生产节点 server.js -p $PORT", "start2": "下一个开始" },

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（图像、字体等）手动为公用文件夹中的任何内容添加前缀

Docs “公用文件夹中的文件；如果您想通过 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>