我目前正在做一个使用 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 (in 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 组件/路由都工作正常，但新的组件/路由不能。
谢谢！
当我将/test 路由移动到与显示和编辑路由相关的动态路由上方时/test网址正在加载 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
}
在进行此更改之前，/testurl 与path: '/:product_id路由模式匹配product_id参数值设置为值"test"。因此，规则是始终在动态路由之前定义特定路由。