新拉下来的vue项目怎么跑起来?

好像是有点简单,但是遇到好多次了每一次都要百度。。。

1.最重要的一步!!!! 先建一个分支,在子分支里进行操作!!!

2.找到文件 package.json

"scripts":{}里可以看出项目是 vue2(npm run dev)还是 vue3(npm run serve) 这里直接点击调试就可以了
​​在这里插入图片描述

3. 第一个报错:

vue-cli-service build
'vue-cli-service' 不是内部或外部命令,也不是可运行的程序
或批处理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! wy-homework@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the wy-homework@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install
npm ERR! A complete log of this run can be found in:
npm ERR!     D:\node.js\node_cahce\_logs\2021-10-04T10_03_52_641Z-debug.log

解决:

  • 方法一: (重新)安装依赖
    npm run install
    如果文件列表里有 node modules 文件,先把它删了,在执行命令。
    安装成功后 ,执行 npm run devnpm run serve,还是报同样的错误,重新再操作一下 方法一
    还不行?那再试试 方法二 吧!
  • 方法二: 试一下链接的第一个方法就行,它的第三个方法是错的!!!!

4.把项目跑起

  • vue2 : npm run dev
  • vue3: npm run serve

5.报了一个新的"错误"

$ npm run build

> wy-homework@0.1.0 build C:\Users\Administrator\Desktop\浣滀笟绯荤粺鍓嶅彴\wy-homework
> vue-cli-service build
> 

····
  Images and other types of assets omitted
 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

解决:可能你已经观察出来了,我用的是 npm run build

运行完的结果并不是我想要的


 App running at:
  - Local:   http://localhost:8080
  - Network: http://192.168.1.126:8080

翻译了一下,那个“报错”的最后一句意思为
图像和其他类型的资产省略了完成构建完成。dist目录已经准备好要部署了。请在https://cli.vuejs.org/guide/deployment.html上查看部署说明

这么看来并不是报错,而是准备部署,那就是命令行写错了,应该是
npm run serve

好啦大概就是这样,以后有再补充啦!

关于 npm run build 的后续来啦!

代码改完之后发给后端部署,发现没改成功??然后呢,吵了一番发现,我的问题,后端用到的代码居然没有修改到也就是dist文件。
这个时候想到了 上面的 “报错”!!!真相就在这里!!npm run build就是用来生成后端部署代码的!!
总结:在代码要部署之前,需先运行npm run build然后再发代码给后端

  • 4
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值