“npm run build”后如何修复空白网页

Question

我目前正在使用 Vue 和 Firebase 开展一个项目。 问题是我的开发服务器在构建并部署到 prod 后不再从我的 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参数值设置为值“test”。 所以规则是始终在动态路由之前定义特定路由。