HoC*_*Co_ 4 configuration http express server
大家好，我目前在 Express 上工作，并在尝试打开我的 index.html 时收到此错误消息：
\n\n拒绝执行来自“ http://localhost:7500/app.bundle.js ”的脚本，因为其 MIME 类型（“text/html”）不可执行，并且启用了严格的 MIME 类型检查。- 来自本地主机/:1 -
\n\n基本上我目前尝试配置 MIME 类型，因为问题似乎来自于此。
\n\n这是我的树结构：
\n\n.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dist\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app.bundle.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app.bundle.js.map\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ninja.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 picture.jpeg\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 style.css\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 test.txt\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 router\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 router.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 server\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 server.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 App.jsx\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 static\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 webpack.config.js\nHTML：
\n\nindex.html\n\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <meta http-equiv="X-UA-Compatible" content="ie=edge">\n <link rel="stylesheet" href="style.css">\n <title> React Components </title>\n\n</head>\n<body>\n\n\n <h2> 1 </h2>\n\n <button style="height: 50px ; width : 250px ;" id="getText"> Get text </button>\n <button style="height: 50px ; width : 250px ;" id="getUser"> Get user </button>\n <button style="height: 50px ; width : 250px ;" id="getPosts"> GetPosts : Get API DATA </button>\n<hr>\n\n<div id="output"></div>\n<form id="addPost">\n\n <div>\n <input type="text" id="title" placeholder="Title">\n </div>\n\n <div>\n <textarea name="" id="body" cols="30" rows="10" placeholder="Body">\n\n </textarea>\n </div>\n\n <input type="submit" value="Submit">\n </form>\n <script src="app.bundle.js"></script>\n\n <img id=\'picture1\' style=\'width : 125px ;\' alt="">\n</body>\n</html>\nJSX :\nApp.jsx
\n\nimport \'babel-polyfill\';\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport \'isomorphic-fetch\' ;\ndocument.getElementById(\'getText\').addEventListener(\'click\', getText);\ndocument.getElementById(\'getUser\').addEventListener(\'click\', getUser);\ndocument.getElementById(\'getPosts\').addEventListener(\'click\', getPosts);\ndocument.getElementById(\'addPost\').addEventListener(\'submit\', addPost);\n\nfunction getText(){\nfetch(\'/test.txt\')\n.then((res) => res.text()).\nthen((data) => document.getElementById(\'output\').innerHTML = data ).\ncatch((err) => console.log(err));\n};\n\n\nfunction getUser(){\nfetch(\'/ninja.json\')\n.then((res) => res.json())\n.then((data) => {\n let output = \'<h2> Users </h2>\';\n data.forEach(function (user){\n output += `\n <ul> <li> ${user.username}</li>\n <li> Location: ${user.location}</li>\n <li> ${user.online} </li>\n <li> ${user.followers}</li>\n </ul>\n `\n });\n document.getElementById(\'output\').innerHTML = output;\n});\n}\n\nfunction getPosts(){\nfetch(\'http://jsonplaceholder.typicode.com/posts\')\n.then((res) => res.json())\n.then((data) => {\n let output = \'<h2> Users </h2>\';\n data.forEach(function (post){\n output += `\n <div>\n <h3> Title : ${post.title} </h3>\n <p> Body : ${post.body} </p>\n </div>\n `\n });\n document.getElementById(\'output\').innerHTML = output;\n});\n}\nfunction addPost(e){\n e.preventDefault() ;\n let title = document.getElementById(\'title\').value;\n let body = document.getElementById(\'body\').value;\n\n fetch(\'http://jsonplaceholder.typicode.com/posts\', {\n method : \'POST\',\n headers : {\n \'Accept\' : \'application/json, text//plain, */*\',\n \'Content-type\' : \'application/json\'\n },\n body : JSON.stringify({ title : title, body : body })\n })\n .then((res) =>res.json())\n .then((data) => console.log(data));\n}\nJS \n服务器.js
\n\nrequire("babel-polyfill");\nvar express = require(\'express\');\nvar app = express();\nvar port = 7500 ;\n\n\napp.get("/", (req, res) => {\n res.sendFile(__dirname + "/dist/index.html");\n});\n\n\n\n\napp.listen(port, function() {\n\n console.log(\'server started in port \' + port);\n\n}) ;\n\n\napp.use(express.static(__dirname + \'dist\'));\n\npackage.json \n\n{\n "name": "reactdevelopment",\n "version": "1.0.0",\n "description": "",\n "main": "app.js",\n "scripts": {\n "test": "echo \\"Error: no test specified\\" && exit 1",\n "start": "./node_modules/.bin/nodemon ./server.js",\n "devserver": "node_modules/.bin/webpack-dev-server --hot --inline",\n "watch": "webpack --watch"\n },\n "author": "",\n "license": "ISC",\n "devDependencies": {\n "babel-cli": "^6.26.0",\n "babel-core": "^6.26.3",\n "babel-loader": "^7.1.4",\n "babel-polyfill": "^6.26.0",\n "babel-preset-es2015": "^6.24.1",\n "babel-preset-es2015-node4": "^2.1.1",\n "babel-preset-react": "^6.24.1",\n "babel-preset-stage-0": "^6.24.1",\n "babel-register": "^6.26.0",\n "create-react-class": "^15.6.3",\n "node": "^10.0.0",\n "nodemon": "^1.17.3",\n "react": "^16.3.2",\n "react-dom": "^16.3.2",\n "react-router": "^4.2.0",\n "webpack": "^4.6.0",\n "webpack-cli": "^2.0.15",\n "webpack-dev-server": "^3.1.3"\n },\n "dependencies": {\n "body-parser": "^1.18.2",\n "es6-promise": "^4.2.4",\n "express": "^4.16.3",\n "fetch": "^1.1.0",\n "isomorphic-fetch": "^2.2.1",\n "mongo": "^0.1.0",\n "mongod": "^2.0.0",\n "mongodb": "^3.0.7",\n "mongoose": "^5.0.16",\n "source-map": "^0.7.2"\n }\n}\nwebpack.config.js
\n\nconst webpack = require(\'webpack\');\n\nmodule.exports = { \n\n devtool: \'source-map\',\n entry: {\n app: __dirname +\'/src/App.jsx\'\n\n },\n output: {\n path: __dirname + \'/dist\',\n filename: \'app.bundle.js\'\n },\n\n module: {\n rules: [\n {\n test: /\\App.jsx$/,\n loader: \'babel-loader\',\n query: {\n presets: [\'react\',\'es2015\']\n }\n }\n ]\n },\n\n devtool : \'#source-map\',\n\n optimization : { \n\n splitChunks: {\n chunks: "async",\n minSize: 3000,\n minChunks: 1,\n maxAsyncRequests: 5,\n maxInitialRequests: 3,\n automaticNameDelimiter: \'~\',\n name: true,\n cacheGroups: {\n vendors: {\n test: /[\\\\/]node_modules[\\\\/]/,\n priority: -10\n },\n default: {\n minChunks: 2,\n priority: -20,\n reuseExistingChunk: true\n }\n }\n }\n },\n devServer: {\n\n port: 8000,\n contentBase: \'static\',\n proxy: {\n \'/api/*\': {\n target: \'http://localhost:7500\'\n }\n }\n }\n};\n如果您有建议、链接文档、指示或提示，那就太好了，\n谢谢
\n现在/app.bundle.js返回
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /app.bundle.js</pre>
</body>
</html>
因为设置错误。
app.use(express.static(__dirname + 'dist'));app.use(express.static(__dirname + '/dist'));__dirname不包括尾部斜杠。
/.../myApp/dist/app.bundle.jsindex.html源代码app.bundle.js为 javascript 文件，MIME 预计为text/javascript等等。app.use(express.static(__dirname + 'dist'))app.use(express.static('/.../myAppdist/app.bundle.js'))不存在。text/html