node.js - 为什么 express.js 找不到静态文件?
问题描述
我创建了简单的 express.js 服务器服务器配置:
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
const SERVER_PORT = 3000;
if (process.env.NODE_ENV === "development") {
app.use(
webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
})
);
app.use(webpackHotMiddleware(compiler));
}
app.use(express.static("build"));
app.get("/", (req, res) => {
res.sendFile(__dirname + '/build/index.html', { root: __dirname })
});
app.listen(SERVER_PORT, (error) => {
if (error) {
console.error(error)
} else {
console.info("==> Listening on port %s. Open up http://localhost:%s/ in your browser.", SERVER_PORT, SERVER_PORT)
}
});
我用 webpack 构建项目。这是 webpack 配置:
const BUILD_DIR = path.resolve(__dirname, './build');
const ASSETS_PATH = path.resolve(__dirname, './src/js');
const STATIC_PATH = path.resolve(__dirname, './public')
var webpack_config = {
mode: ( process.env.NODE_ENV === "production" ) ? "production" : "development",
context: __dirname,
entry: {
main: [
"react",
"react-dom",
"react-router"
],
react_app: [
path.join(ASSETS_PATH, "/index.tsx"),
"webpack-hot-middleware/client?path=/__webpack_hmr&reload=true"
]
},
output: {
path: BUILD_DIR,
filename: 'js/[name].min.js',
publicPath: '/build',
hotUpdateChunkFilename: '.hot/hot-update.js',
hotUpdateMainFilename: '.hot/hot-update.json',
},
resolve: {
extensions: [' ', '.web.js', '.ts', '.tsx', '.js', '.jsx', 'css'],
},
devtool: ("production" === process.env.NODE_ENV) ? "source-map" : "eval-source-map",
module: {
rules: [
{
test: /\.(jsx|js)$/,
use: ['babel-loader?compact=true&comments=true&minified=true', 'eslint-loader'],
exclude: /node_modules/
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: '/node_modules/'
},
{
test: /\.(ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/css/fonts/'
}
}
},
{
test: /\.(eot|svg|png|jpg|gif|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/css/media/'
}
}
},
{
test: /\.jpe?g$|\.ico$|\.gif$|\.png$/,
exclude: /node_modules/,
use: {
loader: 'file-loader',
options: {
limit: 1024 * 10,
name: '[name].[ext]',
outputPath: 'images/'
}
}
},
{
test: /\.json$/,
loader: "json-loader"
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
}
}
, 'css-loader'],
},
]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title: ' Appointment-APP | Stefanini EMEA ',
template: './public/index.html',
filename: path.join(BUILD_DIR, '/index.html'),
chunks: ['main', 'react_app']
}),
new CopyWebpackPlugin({
patterns: [
{
from: path.join(STATIC_PATH, '/images'),
to: path.join(BUILD_DIR, '/images'),
toType: 'dir'
},
]
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: '[id].css',
}),
],
};
在这里,我有 2 个 mods - 生产和删除。在删除模式下它工作得很好,但是当我启动服务器并尝试输入 http://localhost:3000/ 时,我收到如下错误:
Refused to apply style from 'http://localhost:3000/build/css/react_app.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:9 GET http://localhost:3000/build/js/main.min.js net::ERR_ABORTED 404 (Not Found)
所以,我指定了静态文件夹路径 - app.use(express.static("build"));
,但没有结果。看来,快递在“buid”文件夹中找不到文件
解决方案
你必须像这样编码
app.use('/', express.static(path.join(__dirname, 'build')))
然后检查。
推荐阅读
- mysql - 对整个左外连接集执行过滤
- php - Win10 上的 Docker - apt-get install 返回非零代码:100
- android - 如何将两个android项目实时连接到一个数据库firebase?
- wordpress - 如何在最后的wordpress post表中添加完整的自定义行
- r - 更改 heatmap.2 中的颜色键高度
- python - 如何使用 Pyspark 部署模式集群将文件保存到 HDFS?
- telegram - 你如何设计 Telegram 的“联系人加入”功能?
- tableau-api - Tableau - 使用时间组合多个计数 if 语句
- java - 如何解决 - 提供者 org.slf4j.simple.SimpleServiceProvider 不是子类型?
- twilio - 是否有任何机制可以将 twilio 可编程聊天记录导入新的 twilio 帐户?