Vue前端框架--Vue工程项目问题总结{脚手架 Vue-cli}

Vue脚手架部署问题总结

我所遇到的一共两大问题

只有先执行npm install 之后 才能run serve
否则会报错 vue-cli-serve不是内部或者外部的命令,也不是可运行的程序或者批处理文件的错误

1. 运行npm install会报错

2. 运行npm run serve报错

nodejs官网为 https://nodejs.org/en/


选择推荐用户最多的使用版本

关于第一次下载nodejs 需要注意

最好是按照默认提示一步步按部就班的下载,放到C盘即可


配置环境变量

结果:

项目终端里查看

大家可以使用VScode的CMD终端

一般package.json文件

javascript 复制代码
{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-vuex": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

问题一

运行npm install会报错

reason: certificate has expired

:原因:证书失效

解决:

bash 复制代码
npm config get registry//获得镜像

是以http开头的,淘宝镜像

css 复制代码
//清理缓存
npm cache clean --force

//撤销密钥

css 复制代码
npm config set strict-ssl false

再次执行

bash 复制代码
npm install

出现node_modules:结点模块

问题二:

bash 复制代码
npm run serve

报错:

解决方式(仅限 windows):

在项目中 package.json 的 scripts 中新增

SET NODE_OPTIONS=--openssl-legacy-provider

bash 复制代码
{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-vuex": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

成功:

结语 希望对大家有所帮助

相关推荐
浏览器API调用工程师_Taylor5 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
一个水瓶座程序猿.15 分钟前
Vue3 中使用 Vueuse
前端·javascript·vue.js
网络点点滴1 小时前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
paopaokaka_luck1 小时前
基于SpringBoot+Vue的酒类仓储管理系统
数据库·vue.js·spring boot·后端·小程序
雲墨款哥2 小时前
Vue3.0 项目初始化及 Element Plus 配置实战
前端·vue.js
前端小饭桌2 小时前
关于 Vue 3 的 ref,这些细节你了解了多少?
前端·vue.js
光影少年2 小时前
vue3.0性能提升主要通过那几方面体现的?
前端·vue.js
江城开朗的豌豆3 小时前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?
前端·javascript·vue.js
Jinxiansen02113 小时前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js
人工智能教学实践4 小时前
【基于Echarts的地图可视化】
arcgis