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

Posted 2023-02-19

【中文标题】具有 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

【发布时间】：2022-01-04 04:35:41

【问题描述】：

该应用程序已经在生产环境中成功运行了一年，并且在 MacOS localhost 上完美运行。最近需要将应用程序设置为在 Windows 10 localhost 上运行，在解决所有错误后，现在应用程序启动，请求似乎通过了，但是，只有“/”页面实际呈现，所有其他路由都没有t 渲染并停留在空白页面。

可能是什么原因？

在初始设置期间，我遇到了 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"
]

【问题讨论】：

嗨菲尔！我从 VS Code 启动它，这两个应用程序都在同一个核心文件夹中，并且我有 package.json 启动脚本，它执行 nodemon app.js 来运行服务器应用程序和 npm run serve 来运行客户端应用程序。服务器在 3000 端口启动，客户端在 8080 端口启动。这是您的意思吗？

这是一个 package.json 脚本，在控制台调用 npm run dev 后运行。 'dev' 将运行以下命令："run-p dev:server dev:client" 并从那里另外运行："dev:server": "nodemon --ignore './client' app.js" 和 "dev:client" ：“cd 客户端 && npm 运行服务”。谢谢菲尔！

是的，node 和 windows-build-tools 可能是个问题。您需要构建工具意味着存在可能与您的节点不兼容的二进制 dep。尝试将节点版本与旧版本匹配并从头开始设置项目。 “所有其他路由都不会呈现并停留在空白页面” - 控制台和网络中是否存在错误？

您好 Estus，我将尝试使用与原始版本匹配的不同 Node 版本从头开始重建所有内容。这是最奇怪的部分，我没有发现任何错误，而且就我环顾四周而言，Vue 似乎也没有提供特定的“调试”模式？而且似乎后端工作正常，所以我猜它一定是一个 Vue 问题。然而，最近的一个更新是我有另一个类似的项目在本地工作，但是它的设置不那么复杂。我正在测试它是否是任何特定的包可能会以某种方式导致问题，到目前为止没有成功。

@robertfoenix 你能分享一个重现问题的链接吗？

【参考方案1】：

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

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

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

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

【讨论】：

谢谢您，同样感谢您的详细说明！看来我真的是时候转向 Docker 或同等产品了。

这绝对是后端 Node 的一个选项，特别是如果已知它使用 bin 来提高性能或功能，但对于前端来说可能是过度杀伤力，我不记得除了 node-sass（它有已弃用）给我带来了这样的麻烦。您没有说您最初使用的是哪个 Node 版本，但它应该是偶数和 LTS，奇数版本 (17) 会立即出现问题。

原来在原始代码版本中，我确实有 node-sass，看起来它是我在试错过程中删除的东西之一（它几乎没有使用，所以我删除了使用的任何地方，然后删除了包），并在此处添加了修改后的 package.json。在新的 repo 副本中，存在 node-sass。但是由于我已经删除了 node-sass，它消除了错误，所以不确定 node-sass 是否是唯一的原因，但没有其他任何错误。 package-lock.json 可以发挥作用吗？我会尝试再次删除 node-sass 看看！原始节点版本。是 14.5.5，新的是 16+。

是的，它确实起到了作用。如果它处于包锁定状态，则它已安装。在您的情况下，它可能只需要更新到与 16 兼容的版本 github.com/sass/node-sass#node-version-support-policy 。 JS-only sass 包是一个替代品，但可能需要对 scss 文件进行一些调整

是的，你需要一些 Node 背景才能顺利进行前端开发，至少需要 Webpack 和常见的 NPM 知识。