javascript - 如何修复 'npm run build'后的空白网页

Question

我目前正在使用 Vue 和 Firebase 开发一个项目。问题是我的开发服务器在构建并部署到产品后不再从我的 vue 路由器呈现新路由。

例如:我有几个 vue 组件，它们都为相应的 vue 路由器路由正确呈现，尽管现在当我添加新组件(Test.vue)/新路由时，加载网页时没有呈现任何内容。

我花了很长时间查看与此问题相关的几乎每篇有用的文章，但没有运气。我尝试在 vue.config.js 文件中手动设置 webpack 配置，并将根路径设置为“./”以及“/”甚至“”。没有效果。

此时我真的迷路了。

package.json(在项目的根文件夹中):

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@firebase/firestore": "^1.4.10",
    "@google-cloud/firestore": "^2.2.7",
    "core-js": "^2.6.5",
    "firebase": "^6.4.0",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.10.0",
    "@vue/cli-service": "^3.10.0",
    "vue-template-compiler": "^2.6.10",
    "webpack-cli": "^3.3.7"
  }
}

//

package.json(在 node_modules/webpack-dev-server/schema-utils/src/package.json 中):

{
  "_args": [
    [
      "schema-utils@1.0.0",
      "/home/b-rad/Documents/AustinKratom/frontend"
    ]
  ],
  "_development": true,
  "_from": "schema-utils@1.0.0",
  "_id": "schema-utils@1.0.0",
  "_inBundle": false,
  "_integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
  "_location": "/webpack-dev-server/schema-utils",
  "_phantomChildren": {},
  "_requested": {
    "type": "version",
    "registry": true,
    "raw": "schema-utils@1.0.0",
    "name": "schema-utils",
    "escapedName": "schema-utils",
    "rawSpec": "1.0.0",
    "saveSpec": null,
    "fetchSpec": "1.0.0"
  },
  "_requiredBy": [
    "/webpack-dev-server"
  ],
  "_resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
  "_spec": "1.0.0",
  "_where": "/home/b-rad/Documents/AustinKratom/frontend",
  "author": {
    "name": "webpack Contrib",
    "url": "https://github.com/webpack-contrib"
  },
  "bugs": {
    "url": "https://github.com/webpack-contrib/schema-utils/issues"
  },
  "dependencies": {
    "ajv": "^6.1.0",
    "ajv-errors": "^1.0.0",
    "ajv-keywords": "^3.1.0"
  },
  "description": "webpack Validation Utils",
  "devDependencies": {
    "@commitlint/cli": "^7.0.0",
    "@commitlint/config-conventional": "^7.0.0",
    "@webpack-contrib/eslint-config-webpack": "^2.0.0",
    "del-cli": "^1.0.0",
    "eslint": "^5.0.0",
    "eslint-plugin-import": "^2.0.0",
    "eslint-plugin-prettier": "^2.0.0",
    "jest": "^21.0.0",
    "prettier": "^1.0.0",
    "standard-version": "^4.0.0"
  },
  "engines": {
    "node": ">= 4"
  },
  "files": [
    "src"
  ],
  "homepage": "https://github.com/webpack-contrib/schema-utils",
  "license": "MIT",
  "main": "src/index.js",
  "name": "schema-utils",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/webpack-contrib/schema-utils.git"
  },
  "scripts": {
    "clean": "del-cli coverage",
    "commits": "commitlint --from $(git rev-list --tags --max-count=1)",
    "lint": "eslint --cache src test",
    "release": "npm run commits && standard-version",
    "test": "jest --env node --verbose --coverage"
  },
  "version": "1.0.0"
}

如果我需要提供额外的信息或文件，请告诉我。我在 Github 上也有这个项目:https://github.com/austin-kratom/AustinKratom

在本地主机开发服务器上时，控制台中没有错误消息。只是一个空白网页，没有别的。我以前的所有 vue 组件/路由都可以正常工作，但新的却不行。

谢谢!

Answer 1

当我将/test 路由移动到与显示和编辑路由相关的动态路由之上时，/test url 正在加载 Test.Vue。

{
      path: '/test',
      name: 'test',
      component: Test
    },
    {
      path: '/edit/:product_id',
      name: 'edit-product',
      component: EditProduct
    },
    {
      path: '/:product_id',
      name: 'show-product',
      component: ShowProduct
    }

在进行此更改之前，/test url 匹配 path: '/:product_id 路由模式，其中 product_id 参数值设置为值“测试”。所以规则是始终在动态路由之前定义特定路由。