带有 Node 后端的 Vue 应用程序除了 Windows localhost 上的主页外不呈现任何内容，在生产环境和 MacOS localhost 中工作

Question

该应用程序已运行成功投入生产一年，并且在 MacOS localhost 上完美运行。最近需要在 Windows 10 本地主机上将应用程序设置为运行，解决所有错误后，现在应用程序启动，请求似乎可以通过，但是实际上只有 '/' 页面呈现，所有其他路由不呈现并停留在空白页面。

可能是什么原因？

在初始设置期间，我运行遇到了 windows-build-tools 和缺少 Python 的问题，我最终通过 Chocolatey 安装所有内容解决了这个问题。这可能相关吗？

Windows 上的节点版本比项目中指定的版本新，这会导致这种情况吗？

我很乐意提供更多详细信息并执行您推荐或建议的任何实验。我自己的猜测是它要么与 Windows 上的设置有关，要么与 Windows.

上的软件包有关

应用程序通过 package.json 启动脚本启动：

"scripts": {
  "dev": "run-p dev:server dev:client",
  "dev:server": "nodemon --ignore './client' app.js",
  "dev:client": "cd client && npm run serve",
  "postinstall": "npm install --only=dev --prefix client && npm install --prefix client && npm run build --prefix client",
  "start": "node app.js",
  "heroku-prebuild": "python cleanup_script.py"
},

vue 应用程序包含以下将作为结果执行的脚本：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "bundle-report": "webpack-bundle-analyzer --port 4200 dist/stats.json"
},

VueJS package.json 依赖和开发依赖。

{
"version": "0.1.0",
"private": true,
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "bundle-report": "webpack-bundle-analyzer --port 4200 dist/stats.json"
},
"dependencies": {
  "@ckeditor/ckeditor5-build-decoupled-document": "^18.0.0",
  "@ckeditor/ckeditor5-vue": "^1.0.3",
  "@johmun/vue-tags-input": "^2.1.0",
  "@vue/composition-api": "^1.0.0-rc.3",
  "autolinker": "^3.14.2",
  "axios": "^0.21.1",
  "core-js": "^3.8.2",
  "date-fns": "^2.16.1",
  "detectrtc": "^1.4.1",
  "gsap": "^3.6.0",
  "imagekitio-vue": "^1.0.9",
  "ismobilejs": "^1.1.1",
  "jwt-decode": "^2.2.0",
  "maxlength-contenteditable": "^1.0.1",
  "socket.io-client": "^3.1.2",
  "twilio-video": "^2.10.0",
  "v-hotkey": "^0.8.0",
  "vue": "^2.6.12",
  "vue-color": "^2.8.1",
  "vue-gtag": "^1.16.1",
  "vue-i18n": "^8.22.4",
  "vue-infinite-loading": "^2.4.5",
  "vue-router": "^3.4.9",
  "vue-select": "^3.11.2",
  "vue-smooth-dnd": "^0.8.1",
  "vue-vimeo-player": "^0.2.2",
  "vue-window-size": "^1.0.3",
  "vue-youtube": "^1.4.0",
  "vuejs-datepicker": "^1.6.2",
  "vuex": "^3.6.0",
  "webrtc-adapter-test": "^0.2.10"
},
"devDependencies": {
  "@vue/cli-plugin-babel": "~4.3.0",
  "@vue/cli-plugin-eslint": "~4.3.0",
  "@vue/cli-service": "~4.3.0",
  "babel-eslint": "^10.1.0",
  "dotenv-webpack": "^5.1.0",
  "eslint": "^6.7.2",
  "eslint-plugin-vue": "^6.2.2",
  "vue-template-compiler": "^2.6.12",
  "webpack-bundle-analyzer": "^4.4.0"
},
"eslintConfig": {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "rules": {}
},
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not dead"
]

Answer 1

节点版本可能是个问题。安装需要 windows-build-tools 表示存在可能与当前 Node 版本不兼容的二进制依赖项。二进制 NPM 依赖项通常为特定包版本提供预编译二进制文件的子集，其中平台和 Node.js 版本的组合可以被认为是安全或受支持的。对于任何其他组合，需要使用构建工具为当前平台编译二进制包。这并不总是意味着包不兼容，但这是常见的。

例如node-sass（这里好像没有用）有不同的版本对应特定的Node.js版本，并为支持的子集提供预编译的二进制文件；对于不受支持的 Node.js 版本，它会在安装过程中回退到编译并且很可能会失败。

在这种情况下，不知道哪个依赖项导致了这个问题，这需要在 npm/yarn 日志中进行审查。

为了避免这种情况，Node版本可以与旧版本匹配。需要重新安装项目依赖项，因为 node_modules in use 已经绑定到当前使用的 Node 版本。

带有 Node 后端的 Vue 应用程序除了 Windows localhost 上的主页外不呈现任何内容，在生产环境和 MacOS localhost 中工作

Vue app with Node backend doesn't render anything except the home page on Windows localhost, works in production and MacOS localhost

localhost

node.js

vue.js

windows-10