Question

我有一个使用了一年的VueJS项目，该项目在@ vue / cli-service的v3.9.2上运行。我已经使用https://localhost:8000命令的--https标志在vue-cli-service上运行它。

现在，我将@vue/cli-service软件包更新为v3.12.1。运行npm run serve时，在Chrome中出现以下错误。没有按钮可进入本地主机。

任何人都可以告诉我该错误正在显示的Vue cli服务中发生了什么变化，如何解决该错误？

这是我的package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "generate": "babel-node --config-file ./generator/babel.config.js -- ./generator",
    "prod-serve": "npm run generate && vue-cli-service --mode production --https --port 8000 serve",
    "build": "npm run generate && vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lint-check": "vue-cli-service lint --no-fix",
    "serve": "vue-cli-service --https --port 8000 serve --host localhost",
    "postinstall": "postinstall",
    "test": "jest --changedSince=master --coverage",
    "test-ci": "jest --ci",
    "test-watch": "npm run generate && jest --watch --no-coverage",
    "test-e2e": "cypress run --browser chrome",
    "test-e2e-headless": "cypress run",
    "test-e2e-dev": "cypress open"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0-rc.1",
    "can-ndjson-stream": "^1.0.0",
    "color-convert": "^2.0.0",
    "filesize": "^4.1.2",
    "intro.js": "^2.9.3",
    "jsonpath": "^1.0.1",
    "lodash": "^4.17.11",
    "luxon": "^1.11.4",
    "papaparse": "^4.6.3",
    "sass-loader": "^8.0.0",
    "search-query-parser": "^1.5.2",
    "vue": "^2.5.21",
    "vue-i18n": "^8.8.1",
    "vue-introjs": "^1.3.2",
    "vue-router": "^3.0.1",
    "vue2-dropzone": "^3.5.2",
    "vuelidate": "^0.7.4",
    "vuetify": "^2.1.12",
    "vuex": "^3.0.1",
    "vuex-i18n": "^1.11.0",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/node": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@vue/cli-plugin-babel": "3.12.1",
    "@vue/cli-plugin-eslint": "3.12.1",
    "@vue/cli-service": "3.12.1",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-core": "^7.0.0-bridge",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.8.0",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-module-resolver": "^3.2.0",
    "css-loader": "^2.1.1",
    "cypress": "^3.4.1",
    "eslint": "^5.8.0",
    "eslint-config-prettier": "^4.3.0",
    "eslint-plugin-cypress": "^2.2.1",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-vue": "^5.0.0",
    "fs-extra": "^8.0.1",
    "jest": "^24.8.0",
    "jest-junit": "^6.4.0",
    "postinstall": "^0.4.2",
    "regenerator-runtime": "^0.13.1",
    "sass": "^1.23.7",
    "style-loader": "^0.23.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-vuetify": "^2.0.2",
    "vue-jest": "^3.0.4",
    "vue-template-compiler": "^2.5.21",
    "webpack-bundle-analyzer": "^3.3.2",
    "worker-loader": "^2.0.0"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "postinstall": {
    "generator/acl_actions.csv": "link public/acl_actions.csv",
    "generator/acl_fields.csv": "link public/acl_fields.csv"
  }
}

操作系统：Ubuntu 18.04

如果我也创建一个新项目，也会发生同样的事情。新项目和旧项目都可以在Firefox中使用。

Answer 1

该错误是在webpack-dev-server 3.9版中引入的：https://github.com/webpack/webpack-dev-server/issues/2313

通过添加依赖项，我设法使用了没有错误的旧版本：

"@vue/cli-service": "~4.0.0",

并在devDependencies中更改@ vue / cli-service的版本（注意波浪号）

npm install

然后在执行npm run serve和{{1}}之前删除node_modules，进行包锁定

希望这对您有帮助

Answer 2

如果由于浏览器未到达该机器上的有效签名而触发认证错误，请尝试生成一个新的签名： How to create a self-signed certificate with OpenSSL

另一种可能性是使Chrome忽略缺少证书的情况：在 Chrome地址栏中：

chrome：// flags /＃allow-insecure-localhost

（答案来自：technipages）

运行VueJS项目时出现NET :: ERR_CERT_INVALID错误

2 个答案: