源为“http://127.0.0.1:8000/issues/app.bundle.js”的<script>加载失败

Question

我有一个 MERN 项目。它使用 "webpack": "^5.75.0" 来代理一个 express 应用 "express": "^4.18.2"

每当我导航到带有“/”的更深层次的 URL 时，index.html 将无法找到 app.bundle.js，因为它会尝试在该特定文件夹中找到 app.bundle.js。

例如。 “http://127.0.0.1:8000/issues/app.bundle.js” 在这里这个应用程序配置试图在不正确的问题文件夹中找到 app.bundle.js。

---

项目文件夹结构（链接到github）

---

index.html ：应用程序的入口点

<script 
  src="./app.bundle.js">
</script>

---

Webpack.config.js

import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import path from 'path';

// const __dirname = path.dirname(new URL(import.meta.url).pathname);
const __dirname = path.resolve();

const config = {
  entry: './src/App.jsx',
  output: {
    path: path.resolve(__dirname, 'static'),
    filename: 'app.bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
    ]
  },
  plugins: [
    new BundleAnalyzerPlugin()
  ],
  devServer: {
    port: 8000,
    static: {
      directory: path.join(__dirname, 'static'),
    },
    proxy: {
      '/api/*': {
        target: 'http://localhost:3000'
      },
    },
    historyApiFallback: true,
  },
  devtool: 'source-map',
  mode: 'development',
}

export default config;

---

Server.js

// const express = require("express")
// const bodyParser = require('body-parser');
// const { validateIssue } = require('./issue')
const __dirname = path.resolve();


import express from 'express';
import path from 'path';
import bodyParser from 'body-parser';
import { MongoClient, ObjectId } from 'mongodb';
import Issue from './issue.js';
import SourceMapSupport from 'source-map-support'; 

SourceMapSupport.install();
const app = express();
// app.use(express.static('static'))
app.use('/static', express.static(path.join(__dirname, 'public')));
app.use(bodyParser.json());

//DATABASE 
// const { MongoClient } = require('mongodb');
const URI = 'mongodb://localhost:27017'
const client = new MongoClient(URI, { useNewUrlParser: true, useUnifiedTopology: true });

let db;

async function connect() {
    await client.connect();
    console.log('Connected to the database server')
    db = client.db('issuetracker');
    const collection = db.collection('issues');
    return 'done.'
}

// Connect to the database
connect()
  .then(() => {
    app.listen(3000, () => console.log('App started on port 3000'))
  })
  .catch(console.error)
  // .finally(() => client.close())


  // REST API ROUTEs
app.get('/api/issues', (req, res) => {
    const filter = {};
    if (req.query.status) filter.status = req.query.status;
    if (req.query.effort_lte || req.query.effort_gte) filter.effort = {};
    if (req.query.effort_lte) filter.effort.$lte = parseInt(req.query.effort_lte, 10);
    if (req.query.effort_gte) filter.effort.$gte = parseInt(req.query.effort_gte, 10);
    console.log(filter);
    db.collection('issues').find(filter).toArray().then(issues => {
      const metaData = { total_count: issues.length}
      res.json({_metaData: metaData, records: issues})
    }).catch(error => {
      console.log(error)
      res.status(500).json({ message: `Internal server error: ${error}`})
    })
});

app.post('/api/issues', (req, res) => {
    const newIssue = req.body;
    newIssue.created = new Date();
    if (!newIssue.status)
        newIssue.status = "New";
    

    // THIS IS WHERE I AM CALLING THE ISSUE FUNCTION
    const err = Issue(newIssue)
    if (err) {
        res.status(422).json({message: `Invalid request: ${err}`});
        return;
    }
    db.collection('issues').insertOne(newIssue).then(result => 
      db.collection('issues').find({_id: result.insertedId}).limit(1).next()
      ).then(newIssue => {
        res.json(newIssue)
      }).catch(error => {
        console.log(error);
        res.status(500).json({message: `Internal server error: ${error}`})
      }) 
})

app.get('/api/issues/:id', (req, res) => {
  let issueId;
  try {
    issueId = new ObjectId(req.params.id);
  } catch (error) {
    res.status(422).json({ message: `Invalid issue ID format: ${error}`});
    return;
  }

  db.collection('issues').find({_id: issueId}).limit(1)
  .next()
  .then(issue => {
    if (!issue) res.status(404).json({ message: `No such issue: ${issueId}`});
    else res.json(issue);
  })
  .catch(error => {
    console.log(error);
    res.status(500).json({ message: `Internal server error: ${error}`});
  });
});

app.get('*', (req, res) => {
  res.sendFile(path.resolve('static/index.html'))
})

当我的网址中没有“/”时它可以正常工作。例如。 http://127.0.0.1:8000/issues 或 http://127.0.0.1:8000/accounts

但是一旦我输入'/'，http://127.0.0.1:8000/issues/ 或http://127.0.0.1:8000/issues/63f9e35faad2eb82a7bb8129

它给了我一个错误，“使用源“http://127.0.0.1:8000/issues/app.bundle.js”加载失败。”

我不确定是否要创建最小工作项目，所以我列出了我认为会影响路由的所有配置文件。 我究竟做错了什么？请帮助

Answer 1

改用这个：

<script src="/app.bundle.js"></script>

区别：你在路径的开头有一个

.

，它只是说：从脚本标签所在的html文件的当前文件夹中获取文件。

根据这个答案，使用前导斜杠，您告诉浏览器始终从根目录获取文件。