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文件

{"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
:原因:证书失效

解决:

npm config get registry//获得镜像

是以http开头的,淘宝镜像

//清理缓存
npm cache clean --force

//撤销密钥

npm config set strict-ssl false

在这里插入图片描述

再次执行

npm install

出现node_modules:结点模块
在这里插入图片描述
问题二:

npm run serve

报错:
在这里插入图片描述

解决方式(仅限 windows):

在项目中 package.json 的 scripts 中新增
SET NODE_OPTIONS=–openssl-legacy-provider

{"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"]
}

成功:
在这里插入图片描述
在这里插入图片描述

结语 希望对大家有所帮助

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/674025.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#中实现串口通讯和网口通讯(使用SerialPort和Socket类)

仅作自己学习使用 1 准备部份 串口通讯需要两个调试软件commix和Virtual Serial Port Driver,分别用于监视串口和创造虚拟串口。网口通讯需要一个网口调试助手,网络上有很多资源,我在这里采用的是微软商店中的TCP/UDP网络调试助手&#xff0…

cleanmymacX和腾讯柠檬哪个好用

很多小伙伴在使用Mac时,会遇到硬盘空间不足的情况。遇到这种情况,我们能做的就是清理掉一些不需要的软件或者一些占用磁盘空间较大的文件来腾出空间。我们可以借助一些专门的清理工具,本文中我们来推荐几款好用的Mac知名的清理软件。并且将Cl…

SQL在云计算中的新角色:重新定义数据分析

文章目录 1. 云计算与数据分析的融合2. SQL在云计算中的新角色3. 分布式SQL查询引擎4. SQL-on-Hadoop解决方案5. SQL与其他数据分析工具的集成6. 实时数据分析与SQL7. SQL在云数据仓库中的角色8. 安全性与隐私保护9. SQL的未来展望《SQL数据分析实战(第2版&#xff…

14.scala隐式转换

目录 概述实践代码执行结果 结束 概述 隐式转换:偷偷的(隐式)对现有功能进行增强(转换) 实践 代码 package com.fun.scalaimport java.io.File import scala.io.Sourceobject ImplicitApp {def main(args: Array[String]): Unit {// implicit 2 to 等价 &…

vuecli3 执行 npm run build 打包命令报错:TypeError: file.split is not a function

问题 今天有个项目在打包的时候遇到了一个问题,就是执行 npm run build 命令的时候报错了,如下: 解决 我排查了一下,模拟代码如下:在打包的时候用了 MinChunkSizePlugin const webpack require("webpack"…

LabVIEW多任务实时测控系统

LabVIEW多任务实时测控系统 面对现代化工业生产的复杂性和多变性,传统的测控系统已难以满足高效、精准、可靠的监控和控制需求。因此,开发一种基于LabVIEW的智能测控系统,能够提高生产效率,保证生产安全,是解决现代工…

怎么清理电脑内存?详细图文教程分享!

“我的电脑用了才不到一年,现在内存总是不足。想问问大家平常遇到电脑内存不足的情况时有什么好用的清理方法吗?” 随着电脑使用时间的增长,内存占用可能会不断增加,导致电脑运行缓慢。为了保持电脑的良好性能,定期清理…

手把手教你实现Kmeans聚类,不使用MATLAB工具箱,纯手写matlab代码免费获取,UCI数据集为例...

K均值(K-means)是一种常用的聚类算法,用于将数据集划分为K个不同的组(簇),使得每个数据点属于与其最近的均值点所代表的簇。K均值算法的基本思想是通过迭代优化,将数据点分配到K个簇中&#xff…

【RT-DETR有效改进】重参数化模块DiverseBranchBlock助力特征提取(附代码 + 修改教程)

👑欢迎大家订阅本专栏,一起学习RT-DETR👑 一、本文介绍 本文给大家带来的是改进机制是一种替换多元分支模块(Diverse Branch Block),Diverse Branch Block (DBB) 是一种用于增强卷积神经网络性能的结构…

牛客网SQL进阶137:第二快/慢用时之差大于试卷时长一半的试卷

官网链接: 第二快慢用时之差大于试卷时长一半的试卷_牛客题霸_牛客网现有试卷信息表examination_info(exam_id试卷ID, tag试卷类别,。题目来自【牛客题霸】https://www.nowcoder.com/practice/b1e2864271c14b63b0df9fc08b559166?tpId240 0 问题描述 试…

基于tomcat的https(ssl)双向认证

一、背景介绍 某个供应商服务需要部署到海外,如果海外多个地区需要部署多个服务,最好能实现统一登录,这样可以减轻用户的使用负担(不用记录一堆密码)。由于安全问题(可能会泄露用户数据)&#x…

【数据结构】二叉树的三种遍历(非递归讲解)

目录 1、前言 2、二叉树的非递归遍历 2.1、先序遍历 2.2、中序遍历 2.3、后序遍历 1、前言 学习二叉树的三种非递归遍历前,首先来了解一下递归序: 递归序就是按照先序遍历的顺序,遇到的所有结点按顺序排列,重复的结点也必须记…

深度学习(14)--x.view()详解

在torch中,常用view()函数来改变tensor的形状 查询官方文档: torch.Tensor.view — PyTorch 2.2 documentationhttps://pytorch.org/docs/stable/generated/torch.Tensor.view.html#torch.Tensor.view示例 1.创建一个4x4的二维数组进行测试 x torch.…

NC6X单点登录设计文档说明

前言 因为业务场景需要,第三方系统有些工作需要经常到NC系统里做,如果每次去NC系统做业务单据,都需要反复登录,导致客户使用体验不是很好,所以需要开发实现从第三方系统单点登录到NC系统,提高客户满意度。 …

零基础学编程系列,从入门到精通,中文编程开发语言工具下载,编程构件容器件之控制面板构件用法

零基础学编程系列,从入门到精通,中文编程开发语言工具下载,编程构件容器件之控制面板构件用法 一、前言 编程入门视频教程链接 https://edu.csdn.net/course/detail/39036 编程工具及实例源码文件下载可以点击最下方官网卡片——软件下载…

PdfFactory Pro软件下载以及序列号注册码生成器

PdfFactory Pro注册机是一款针对同名虚拟打印机软件所推出的用户名和序列号生成器。PdfFactory Pro是一款非常专业的PDF虚拟打印软件,通过使用这款注册机,就能帮助用户免费获取注册码,一键激活,永久免费使用。 pdffactory7注册码如…

分享一下 uniapp 打包安卓apk

首先需要安装 Java 环境,这里就不做解释了 第二步:打开 mac 终端 / cmd 命令行工具 使用keytool -genkey命令生成证书 keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore *testalias 是证书别名&am…

代码随想录Day43 | 1049. 最后一块石头的重量 II 494. 目标和

代码随想录Day43 | 1049. 最后一块石头的重量 II 494. 目标和 1049.最后一块石头的重量II494.目标和474.一和零01背包01背包应用问题 1049.最后一块石头的重量II 文档讲解:代码随想录 视频讲解: 这个背包最多能装多少?LeetCode:10…

【图形学】投影和消隐简介

投影 正交投影 对于物体上任意一点的三维坐标P(x,y,z),投影后的三维坐标为 P ′ ( x ′ , y ′ , z ′ ) P^\prime(x^\prime,y^\prime,z^\prime) P′(x′,y′,z′),那么正交投影的方程为 { x ′ x y ′ y z ′ 0 \begin{cases} x^\primex\\y^\primey\\z^\prime0 \end{case…

canvas绘制横竖坐标轴(带有箭头和刻度)

查看专栏目录 canvas实例应用100专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重…