Javascript 网页包可以'；t仅在云构建期间解析url，在本地工作正常

我花了比我愿意承认的时间更长的时间试图弄明白这一点，我希望有人能帮上忙。我知道有一些类似的问题，但没有一个对我有效，也没有一个完全符合我的问题

我有一个React前端SPA，在monorepo的后端有一个Node Express服务器。不过，这个问题只与React SPA的部署有关。我在尝试部署到Netlify和Vercel时遇到过这种情况

以下是我的回购协议的项目结构：

myproject
- package.json
- packages
  - api
    - ...
  - web
    - dist
      - index.html
      - static  // all minified by webpack 
        - js
        - css
        - media
        - fonts
          - x.hash.ttf
          - y.hash.ttf
          - ... .hash.ttf
    - public
      - index.html  // source html file
    - src
      - index.css
      - index.tsx
      - assets
        - roboto
          - x.ttf
          - y.ttf
          - ... .ttf
      - ...

在将我的Git repo导入Vercel或Netlify时，我将我的基本目录设置为“packages/dist/web”-然后成功检测到该文件夹

但是，在构建过程中，我收到一条错误消息。我知道这与在构建过程中解析URL有关，但我无法理解为什么在云部署的构建过程中会发生这种情况

我对网页包的配置做了很多修改，试图看看更改output.publicPath属性是否会有什么不同，但是outputs.publicPath属性的“/”、“/”、“../”、“../”、“../”和“../../”值仍然会导致错误，尽管它们仍然允许我的本地构建成功

我真的很感激你能帮我解决这个问题。下面是Netlify中的错误，尽管Vercel中的错误堆栈跟踪相同

10:59:41 AM: $ webpack --env mode=production
10:59:59 AM: assets by status 467 KiB [cached] 4 assets
10:59:59 AM: orphan modules 3.78 MiB [orphan] 72 modules
10:59:59 AM: runtime modules 917 bytes 5 modules
10:59:59 AM: cacheable modules 4.03 MiB
10:59:59 AM:   modules by path ./node_modules/ 256 KiB 63 modules
10:59:59 AM:   modules by path ./src/ 3.78 MiB
10:59:59 AM:     ./src/index.tsx + 70 modules 3.78 MiB [built] [code generated]
10:59:59 AM:     ./src/index.css 39 bytes [built] [code generated] [1 error]
10:59:59 AM: ERROR in ./src/index.css
10:59:59 AM: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
10:59:59 AM: ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
10:59:59 AM: Error: Can't resolve 'assets/fonts/roboto/Roboto-Thinitalic.ttf' in '/opt/build/repo/packages/web/src'
    at finishWithoutResolve (/opt/build/repo/packages/web/node_modules/enhanced-resolve/lib/Resolver.js:293:18)
10:59:59 AM:     at /opt/build/repo/packages/web/node_modules/enhanced-resolve/lib/Resolver.js:362:15
10:59:59 AM:     at /opt/build/repo/packages/web/node_modules/enhanced-resolve/lib/Resolver.js:410:5
10:59:59 AM:     at eval (eval at create (/opt/build/repo/packages/web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
10:59:59 AM:     at /opt/build/repo/packages/web/node_modules/enhanced-resolve/lib/Resolver.js:410:5
10:59:59 AM:     at eval (eval at create (/opt/build/repo/packages/web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
10:59:59 AM:     at /opt/build/repo/packages/web/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
10:59:59 AM:     at /opt/build/repo/packages/web/node_modules/enhanced-resolve/lib/Resolver.js:410:5
10:59:59 AM:     at eval (eval at create (/opt/build/repo/packages/web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
10:59:59 AM:     at /opt/build/repo/packages/web/node_modules/enhanced-resolve/lib/Resolver.js:410:5
10:59:59 AM:     at processResult (/opt/build/repo/packages/web/node_modules/webpack/lib/NormalModule.js:598:19)
10:59:59 AM:     at /opt/build/repo/packages/web/node_modules/webpack/lib/NormalModule.js:692:5
10:59:59 AM:     at /opt/build/repo/packages/web/node_modules/loader-runner/lib/LoaderRunner.js:399:11
10:59:59 AM:     at /opt/build/repo/packages/web/node_modules/loader-runner/lib/LoaderRunner.js:251:18
10:59:59 AM:     at context.callback (/opt/build/repo/packages/web/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
10:59:59 AM:     at Object.loader (/opt/build/repo/packages/web/node_modules/css-loader/dist/index.js:155:5)
10:59:59 AM:     at processTicksAndRejections (internal/process/task_queues.js:97:5)
10:59:59 AM:  @ ./src/index.tsx 4:0-21
10:59:59 AM: 1 ERROR in child compilations
10:59:59 AM: webpack 5.21.1 compiled with 2 errors in 16507 ms
10:59:59 AM: ​
10:59:59 AM: ────────────────────────────────────────────────────────────────
10:59:59 AM:   "build.command" failed                                        
10:59:59 AM: ────────────────────────────────────────────────────────────────
10:59:59 AM: ​
10:59:59 AM:   Error message
10:59:59 AM:   Command failed with exit code 1: webpack --env mode=production
10:59:59 AM: ​
10:59:59 AM:   Error location
10:59:59 AM:   In Build command from Netlify app:
10:59:59 AM:   webpack --env mode=production
10:59:59 AM: ​
10:59:59 AM:   Resolved config
10:59:59 AM:   build:
10:59:59 AM:     base: /opt/build/repo/packages/web
10:59:59 AM:     command: webpack --env mode=production
10:59:59 AM:     commandOrigin: ui
10:59:59 AM:     publish: /opt/build/repo/packages/web/dist

---

谢谢你抽出时间

这可能是大小写只在区分大小写的文件系统上出现的问题。从构建输出来看，您在源代码中引用的是

Roboto Thinitalic.ttf

，但是字体的通用文件名是

Roboto Thinitalic.ttf

，带有大写的

I

导入字体的是什么？你能粘贴正在导入的代码吗？

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')


module.exports = function (env) {

    const isEnvProduction = env.mode === 'production'
    const isEnvDevelopment = env.mode === 'development'

    const cssLoaders = []
    isEnvDevelopment && cssLoaders.push(require.resolve('style-loader'))
    isEnvProduction && cssLoaders.push({
        loader: MiniCssExtractPlugin.loader,
        options: { publicPath: '../../' }
    })
    cssLoaders.push({
        loader: require.resolve('css-loader'),
        options: { sourceMap: true, importLoaders: 2, url: true }
    })

    return {

        mode:
            isEnvProduction ? 'production' :
            isEnvDevelopment ? 'development'
                : 'none',

        entry: './src/index.tsx',
        devServer: {
            open: true,
            port: 8888,
            contentBase: path.join(__dirname, '/public'),
            historyApiFallback: {
                disableDotRule: true,
                index: '/'
            },


        },
        output: {
            path: path.join(__dirname, '/dist'),

            filename: isEnvProduction
                ? 'static/js/[name].[contenthash:8].js'
                : isEnvDevelopment && 'static/js/bundle.js',

            chunkFilename: isEnvProduction
                ? 'static/js/[name].[contenthash:8].chunk.js'
                : isEnvDevelopment && 'static/js/[name].chunk.js',

             sourceMapFilename: "[name].js.map",

            publicPath: '../../'
        },
        module: {
            rules: [
                {
                    use: cssLoaders,
                    test: /\.css$/i,
                    include: /src/
                },
                {
                    loader: 'babel-loader',
                    test: /\.(js|jsx|tsx|ts)$/i,
                    exclude: /node_modules/
                },
                {
                    use: require.resolve('source-map-loader'),
                    test: /\.js$/,
                    enforce: 'pre'
                },
                {
                    loader: require.resolve('file-loader'),
                    test: /\.(jpg|jpeg|svg|png)$/,
                    options: {
                        name: 'static/media/[name].[hash:8].[ext]'
                    }
                },
                // I've also tried using this method of resolving fonts with no difference
                // {  
                //  type: 'asset/resource',
                //  test: /\.(woff|woff2|eot|ttf|otf)$/,
                //  generator: {
                //       filename: 'static/fonts/[name][hash:8].[ext]'
                //  }
                // },
                {
                    loader: require.resolve('file-loader'),
                    test: /\.(woff|woff2|eot|ttf|otf)$/,
                    options: {
                        name: 'static/fonts/[name][hash:8].[ext]'
                    }
                },

            ]
        },
        resolve: {
            extensions: ['*', '.js', '.jsx', '.tsx', '.ts']
        },
        plugins: [
            new HtmlWebpackPlugin({
                title: 'DojoLaunch',
                template: './public/index.html',
                inject: true,
                ... isEnvProduction && {
                    minify: {
                        removeComments: true,
                        collapseWhitespace: true,
                        removeRedundantAttributes: true,
                        useShortDoctype: true,
                        removeEmptyAttributes: true,
                        removeStyleLinkTypeAttributes: true,
                        keepClosingSlash: true,
                        minifyJS: true,
                        minifyCSS: true,
                        minifyURLs: true,
                    },
                }
            }),
            new MiniCssExtractPlugin({
                filename: 'static/css/[name].[contenthash:8].css',
                chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
            })
        ],
        performance: false
    }
}