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

在localhost开发服务器上，控制台中没有错误消息。只是一个空白网页而已。我以前所有的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”。因此，规则是始终在动态路由之前定义特定的路由。

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

1 个答案: