GVKun编程网logo

npm run dev 和 npm run serve(npm run dev 和 npm run serve的区别)

23

此处将为大家介绍关于npmrundev和npmrunserve的详细内容,并且为您解答有关npmrundev和npmrunserve的区别的相关问题,此外,我们还将为您介绍关于-save-dev在np

此处将为大家介绍关于npm run dev 和 npm run serve的详细内容,并且为您解答有关npm run dev 和 npm run serve的区别的相关问题,此外,我们还将为您介绍关于-save-dev 在 npm install grunt --save-dev 中是什么意思、cnpm run dev或npm run dev问题收集、iview npm run dev 运行不了、iview npm run dev 运行报错的有用信息。

本文目录一览:

npm run dev 和 npm run serve(npm run dev 和 npm run serve的区别)

npm run dev 和 npm run serve(npm run dev 和 npm run serve的区别)

1、ERR 引发的思考

创建好的 vue 项目直接执行 vue run dev 报错?运行 vue run serve 就可以启动... 如下

npm run dev
npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:
npm ERR!     E:\nodejs\node_cache\_logs\2018-12-12T15_06_08_674Z-debug.log

2、dev build serve?

其实 npm run dev 或者是 npm run serve 等 npm run xxx 并不是一定要这么写。
npm run XXX 是执行配置在 package.json 中的脚本,比如:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},

npm run xxx 中的 xxx 可以理解为键值对的 key,实际上 run 的是在 package.json 里面 scripts 配置的 value;

比如,npm run serve 实际运行的是 vue-cli-service serve;

而放在 3.0 以前运行的则是 node build/dev-server.js 文件;

这时候我们再来看上边的问题是不是豁然了呢, scripts 中并没有配置 dev ,所以控制台报了 [missing script: dev] 的错误 ;

 

3、总结

npm run xxx,并不是你想运行就运行的,只有在 package.json scripts 配置了,你才能 run 的,所以不是所有的项目都能 npm run dev/build。

要了解这些命令做了什么,就要去 scripts 中看具体执行的是什么代码。

这里就像是一些命令的快捷方式,免去每次都要输入很长的的命令(比如 serve 那行)

一般项目都会有 build, dev, unit 等,所以起名,最起码要从名字上基本能看出来是干什么的。

-save-dev 在 npm install grunt --save-dev 中是什么意思

-save-dev 在 npm install grunt --save-dev 中是什么意思

我刚刚开始使用Grunt.js。设置起来非常困难,我正在创建一个package.json文件。

按照本教程,它说有 3 种创建package.json文件的方法。

首先是要做npm install grunt --save-dev

但 是什么--save-dev意思?我试图寻找,但徒劳无功。

答案1

小编典典

--save-dev:包将出现在你的 devDependencies 中。

根据npm install docs。

如果有人计划在他们的程序中下载和使用您的模块,那么他们可能不希望或不需要下载和构建您使用的外部测试或文档框架。

换句话说,当你运行时npm install,你的项目的 devDependencies 将被安装,但你的应用所依赖的任何包的
devDependencies 都不会被安装;此外,将您的应用程序作为依赖项的其他应用程序不需要安装您的
devDependencies。只有在开发应用程序时才需要这样的模块(例如 grunt、mocha 等)。

根据package.json 文档

编辑:尝试可视化做什么npm install

  • 你的项目
    • 已安装依赖项
    • 已安装依赖项
      • 已安装依赖项
      • 未安装 devDependency
    • 未安装 devDependency
    • 已安装 devDependency
    • 已安装依赖项
    • 未安装 devDependency

cnpm run dev或npm run dev问题收集

cnpm run dev或npm run dev问题收集

#vue项目中遇到的问题

跟着 拯救地球好累丫的简书文章上的操作,遇到的问题

vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)

vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)

##1.解除端口占用方法

  • 1.1首先点击开始菜单选择运行,接着在运行对话框中输入“cmd”,回车打开命令提示符窗口,然后在窗口中输入【netstat -ano】,按下回车,之后就会显示所有的端口占用情况。
C:\Users\Administrator>netstat -ano
活动连接
  协议  本地地址          外部地址        状态           PID
  TCP    0.0.0.0:135            0.0.0.0:0              LISTENING       880
  TCP    0.0.0.0:445            0.0.0.0:0              LISTENING       4
  TCP    0.0.0.0:902            0.0.0.0:0              LISTENING       4940
  TCP    0.0.0.0:912            0.0.0.0:0              LISTENING       4940
  TCP    0.0.0.0:1025           0.0.0.0:0              LISTENING       564
  TCP    0.0.0.0:1026           0.0.0.0:0              LISTENING       968
  TCP    0.0.0.0:1027           0.0.0.0:0              LISTENING       412
  TCP    0.0.0.0:1028           0.0.0.0:0              LISTENING       668
  TCP    0.0.0.0:1065           0.0.0.0:0              LISTENING       632
 TCP    [::1]:8080             [::1]:8080             ESTABLISHED     792
  • 2.1如果你要查询指定的端口占用的话,可以在窗口中继续输入【netstat -aon|findstr "提示的端口"】,这里的提示的端口假设为8080,那么就输入命令为【netstat -aon|findstr "8080"】,
C:\Users\Administrator>netstat -ano|findstr "8080"
  TCP    [::1]:8080             [::1]:8080             ESTABLISHED     792

注意findstr后面有空格;

  • 3.1然后根据查询的PID找到对应的进程,我么可以看到占有80这个程序的进程ID:792,继续输入命令【tasklist|findstr "792"】,792就是进程ID,现在知道是哪个进程占用的我们就可以采取相应措施进行解决了。
C:\Users\Administrator>tasklist|findstr "792"
QQ.exe                        5856 Console                    1    128,792 K
360se.exe                      792 Console                    1    132,752 K

##2.cnpm run dev 报错

  • 2.1These dependencies were not found in node_modules
 ERROR  Failed to compile with 2 errors
These dependencies were not found in node_modules:
*ansi-html in ./~/.2.17.0@webpack-hot-middleware/client-overlay.js
*html-entities in ./~/.2.17.0@webpack-hot-middleware/client-overlay.js

因为package.json中"webpack-hot-middleware": "^2.16.1",和运行的版本不一致导致,修改为“^2.17.0”,也不管用,运行

cnpm uninstall webpack-hot-middleware --save-dev

再运行

cnpm install webpack-hot-middleware@2.16.1 --save-dev
  • 2.2error in ./src/main.js 检查main.js空行
 error  in ./src/main.js
  ✘  http://eslint.org/docs/rules/no-multiple-empty-lines  More than 1 blank line not allowed
  D:\download\backup\workspace\MyApp\Vuejs\my-project\src\main.js:6:1
   ^
✘ 1 problem (1 error, 0 warnings)
Errors:
 1  http://eslint.org/docs/rules/no-multiple-empty-lines
 @ multi ./build/dev-client ./src/main.js

src\main.js代码中:

<script>
  import Vue from ''vue''
  import Element from ''element-ui''
  import ''element-ui/lib/theme-default/index.css''
  Vue.use(Element)
  export default {
    name: ''app'',
    data: function () {
      return {
        active: true
      }
    }
  }
</script>
  • 2.3error in ./src/App.vue App.vue中<script>中必须含 import Vue from ''vue''
 error  in ./src/App.vue
✘  http://eslint.org/docs/rules/no-undef  ''Vue'' is not defined
  D:\download\backup\workspace\MyApp\Vuejs\my-project\src\App.vue:37:3
  Vue.use(Element)
     ^
✘ 1 problem (1 error, 0 warnings)
Errors:
  1  http://eslint.org/docs/rules/no-undef
 @ ./src/main.js 3:0-24
 @ multi ./build/dev-client ./src/main.js

src\main.js代码中:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ''vue''
import App from ''./App''
import router from ''./router''
/* eslint-disable no-new */
new Vue({
  el: ''#app'',
  router,
  template: ''<App/>'',
  components: { App }
})
  • 2.4关闭eslint检查,把不需要检查的文件名加到/.eslintignore文件中

iview npm run dev 运行不了

iview npm run dev 运行不了

iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。

最近在使用的过程当中,碰到一些问题记录下来,供大家参考 :

在下载了官方提供的工程文件 iview-projcet 后,运行 npm run dev , 会报错,像下面这样的:

> iview-admin@1.3.1 dev /Users/itxiao6/Desktop/iview-admin
> webpack-dev-server --content-base ./ --open --inline --hot --compress --config build/webpack.dev.config.js

Happy[happybabel]: Version: 4.0.1. Threads: 8 (shared pool)
fs.js:140
  throw new ERR_INVALID_CALLBACK();
  ^

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
    at maybeCallback (fs.js:140:9)
    at Object.fs.write (fs.js:656:14)
    at /Users/itxiao6/Desktop/iview-admin/build/webpack.dev.config.js:12:8
    at FSReqWrap.oncomplete (fs.js:152:20)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! iview-admin@1.3.1 dev: `webpack-dev-server --content-base ./ --open --inline --hot --compress --config build/webpack.dev.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the iview-admin@1.3.1 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

查来查去发现是 windows 上 node 版本过低导致的(Mac 上并不会),解决方案:

在 webpack.*.config 文件中,根据你当前的 node 版本修改为对应的即可。

fs.open(''./build/env.js'', ''w'', function(err, fd) {
    const buf = ''export default "development";'';
    // node 版本问题
    // fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {}); // node --version > v10.1.0
    fs.write(fd, buf, function(err, written, buffer) {}); // node --version < v10.1.0
});

 在这里再啰嗦一遍经老生常谈的事情,遇到问题的时候千万不要慌,可以在 git 仓库地址的 Issues 板块,查看其他开发者提出来的问题及解决方案,一定会有可以学习到的地方哦~~

 

iview npm run dev 运行报错

iview npm run dev 运行报错

 1 > iview-project@3.0.0 dev D:\360安全浏览器下载\iview-project-3.0
 2 > webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js
 3 
 4 fs.js:128
 5   throw new ERR_INVALID_CALLBACK();
 6   ^
 7 
 8 TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
 9     at maybeCallback (fs.js:128:9)
10     at Object.write (fs.js:540:14)
11     at D:\360安全浏览器下载\iview-project-3.0\webpack.dev.config.js:10:8
12     at FSReqWrap.args [as oncomplete] (fs.js:140:20)
13 npm ERR! code ELIFECYCLE
14 npm ERR! errno 1
15 npm ERR! iview-project@3.0.0 dev: `webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js`
16 npm ERR! Exit status 1
17 npm ERR!
18 npm ERR! Failed at the iview-project@3.0.0 dev script.
19 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
20 
21 npm ERR! A complete log of this run can be found in:
22 npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-08-17T02_20_31_857Z-debug.log

在下载了官方提供的工程文件 iview-projcet 后,运行 npm run dev , 会报错,像上面所示。

后面找到了一个解决方案:

在 webpack.*.config 文件中,根据你当前的 node 版本修改为对应的即可。

1 fs.open(‘./build/env.js‘, ‘w‘, function(err, fd) {
2     const buf = ‘export default "development";‘;
3     // node 版本问题
4     // fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {}); // node --version > v10.1.0
5     fs.write(fd, buf, function(err, written, buffer) {}); // node --version < v10.1.0
6 });

 

我们今天的关于npm run dev 和 npm run servenpm run dev 和 npm run serve的区别的分享就到这里,谢谢您的阅读,如果想了解更多关于-save-dev 在 npm install grunt --save-dev 中是什么意思、cnpm run dev或npm run dev问题收集、iview npm run dev 运行不了、iview npm run dev 运行报错的相关信息,可以在本站进行搜索。

本文标签: