Question

我是这个领域的新手。对于任何错误，我深表歉意。我正在使用webpack，HTML loader进行Node js项目。我正在使用开发服务器依赖项在localhost中进行测试。所有模型和视图以及模板index.html文件都位于“ src”文件夹中。 webpack配置和程序包json以及server.js文件位于根目录中。 webpack HTML加载器用于加载“ dist”文件夹中的index.html文件。在“ dist”文件夹中，有一个名为css的文件夹，并且在其中放置了style.css。一切都在开发模式下工作，我可以在本地主机上运行页面，但是当我尝试运行实际上包括“ node server.js”的“ npm run start”时，问题就开始了。然后，当我尝试访问本地主机中的页面时，页面的样式不起作用，但是页面的交互行为正常。我认为，链接index.htm文件中的CSS的“ href”是不正确的。有人知道我的代码有什么问题吗？我已经附上了我正在使用的所有图像和代码。

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: ['./src/js/index.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer:{
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:{
                    loader: 'babel-loader'
                }
            }
        ]
    }
}

package.json文件

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "dev-start": "webpack-dev-server --mode development --open",
    "heroku-postbuild": "webpack --mode production",
    "start": "node server.js"
  },
  "author": "Sayeedur Rahman",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.2.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "express": "^4.17.1",
    "fractional": "^1.0.0",
    "regenerator-runtime": "^0.13.5",
    "uniqid": "^5.2.0"
  },
  "engines": {
    "node": "12.16.1",
    "npm": "6.13.4"
  }
}

server.js文件

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();

app.use(express.static(__dirname + '/dist'));

app.get('/', (req, res) =>{
    res.sendFile(path.resolve(__dirname, '/dist', 'index.html'))
});

app.listen(port);
console.log(`server started on ${port}`);

index.html文件部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
    <title>forkify // Search over 1,000,000 recipes</title>
</head>

Answer 1

我不确定是否可行，但是尝试在server.js文件中的路由之后添加以下行：

app.use(express.static(path.resolve(__dirname, './dist')));

还请注意/ dist

之前的点

如果这不起作用，请尝试更改index.html中的以下行：

<link rel="stylesheet" href="../../css/style.css">

或

<link rel="stylesheet" href="../css/style.css">

HTML和CSS在开发模式下有效，但在生产模式下缺少CSS

1 个答案: