精华内容
下载资源
问答
  • 浅析npm run serve命令

    千次阅读 2021-08-26 22:30:49
    本地开发一般通过执行 npm run serve 命令来启动项目,那这行命令到底存在什么魔法?我们来一探究竟。 根据这篇文章思路:使用vue-cli初始化后运行npm run server到底干了什么 得知,npm run serve 实际上会执行 vue...

    本地开发一般通过执行 npm run serve 命令来启动项目,那这行命令到底存在什么魔法?我们来一探究竟。

    根据这篇文章思路:使用vue-cli初始化后运行npm run server到底干了什么
    得知,npm run serve 实际上会执行 vue-cli-service serve(该文件位于 node_modules.bin\vue-cli-service.cmd),查看该文件,发现最终会执行 node vue-cli-service.js serve(该文件位于 node_modules@vue\cli-service\bin\vue-cli-service.js)。
    vue-cli-service.js就是我们的切入口。
    关键代码:

    const Service = require('../lib/Service')
    //...
    const service = new Service(...
    //...
    service.run(command, args, rawArgv).catch(err => {
      error(err)
      process.exit(1)
    })
    

    根据这篇文章思路:vue-cli系列之vue-cli-service整体架构浅析
    实际执行的文件为 serve.js(该文件位于 node_modules@vue\cli-service\lib\commands\serve.js
    关键代码:

    const WebpackDevServer = require('webpack-dev-server')
    //...
    const webpackConfig = api.resolveWebpackConfig()
    //...
    const compiler = webpack(webpackConfig)
    const server = new WebpackDevServer(compiler, ...
    //...
    server.listen(port, host, err => {
      if (err) {
        reject(err)
      }
    })
    

    可以很清楚的看到,serve.js 中使用了 webpack-dev-server 作为http服务器,启动并监听端口提供服务(不知道webpack-dev-server的话可以暂且将它理解为 nginx)。
    这么下来,思路就清晰了,npm run serve 最最终的目的就是启动一个 webpack-dev-server服务器
    webpack-dev-server原生的配置繁多,学习成本不小,既然vue-cli将webpack-dev-server集成到脚手架中,那一定是帮我们做了很多事情。列举几个点:

    1. 主页面
      WebpackDevServer构造器第二个入参,historyApiFallback属性 -> genHistoryApiFallbackRewrites,设置了根路径会重定向到 index.html(即为主页面)。
    2. 入口文件
      WebpackDevServer构造器第一个入参 -> webpackConfig -> Service.resolveWebpackConfig -> resolveChainableWebpackConfig -> webpackChainFns
      追踪 webpackChainFns 的来源,可以发现 base.js (node_modules@vue\cli-service\lib\config\base.js)会设置 ./src/main.js 为入口文件。
    webpackConfig
          .mode('development')
          .context(api.service.context)
          .entry('app')
            .add('./src/main.js')
    

    等等等等…
    另外,我们在vue.config.js上的配置或多或少都会映射到webpack-dev-server的配置上。这个当然就要参看vue.config.js的文档啦。

    小结

    1. 命令依赖链:npm run serve -> node_modules\.bin\vue-cli-service.cmd serve -> node node_modules\@vue\cli-service\bin\vue-cli-service.js serve
    2. vue-cli 的开发环境实际上使用了 webpack-dev-server 模块实现。
    3. vue.config.js 的配置会作用到 webpack-dev-server 上。

    references:
    vue-cli-service serve 官方文档
    vue.config.js 官方文档
    Webpack 官方文档
    Webpack DevServer 官方文档
    vue-cli系列之vue-cli-service整体架构浅析
    使用vue-cli初始化后运行npm run server到底干了什么

    展开全文
  • npm run serve 界面退出

    千次阅读 2020-03-02 17:40:46
    报错:界面退出 解决方法: cd /var/opt/tracing-file/tracing-ui/ nohup npm run serve > my.log 2>my.log & exit

    报错:界面退出

    解决方法:

    cd /var/opt/tracing-file/tracing-ui/

    nohup npm run serve > my.log 2>my.log & exit
     

    展开全文
  • 先来一张报错的截图 先去配置环境变量 ...运行项目 npm run serve 如果这样子项目还是报同样的错误,那么就把node全局卸载,去控制面板卸载,然后安装,最后安装依赖,运行项目就可以成功了 补充知识:vue

    先来一张报错的截图

    先去配置环境变量

    C:\Users\lgd\AppData\Local\Programs\Microsoft VS Code\bin的后面配置 ;%SystemRoot%\system32;一定要注意分号,

    然后在path环境中配置C:\Windows\System32

    最后去项目安装依赖 npm i

    运行项目 npm run serve

    如果这样子项目还是报同样的错误,那么就把node全局卸载,去控制面板卸载,然后安装,最后安装依赖,运行项目就可以成功了

    补充知识:vue npm run serve报错Cannot find module 'eslint-plugin-html'

    Module build failed: Error: Failed to load plugin html: Cannot find module 'eslint-plugin-html'

    解决:

    运行 npm install eslint-plugin-html 即可解决

    以上这篇解决vue项目运行npm run serve报错的问题就是小编分享给大家的全部内容了

    展开全文
  • vue执行npm run serve后浏览器报Cannot GET / 出现这个 在一开始建立好vue工程的时候仍然可以运行成功 但现在vue add vuetify后出现了npm run serve后浏览器报Cannot GET / 不行 会报错 WARN There are ...

    vue执行npm run serve后浏览器报Cannot GET /

    出现这个

    image-20211119135532013

    在一开始建立好vue工程的时候仍然可以运行成功 但现在vue add vuetify后出现了npm run serve后浏览器报Cannot GET /

    image-20211119105421030

    不行 会报错

    WARN There are uncommitted changes in the current repository, it’s recommend

    进入5000的端口
    网上都是这种答案
    https://blog.csdn.net/tiven_/article/details/120769922
    但对我来说没有效果

    在vite.config.js中添加了一段代码

    发现没有效果

     server: {
        host: '0.0.0.0',
      },
    

    vite.config.js
    在这里插入图片描述

    package.json
    image-20211119134944451

    添加了vuetify后变成了这

      "scripts": {
        "serve": "vite preview --host",
        "build": "vite build",
        "dev": "vite --host"
      },
    

    直接创建好vue的工程后是这个

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

    随后找到了另一篇
    https://blog.csdn.net/qq_41664096/article/details/121312823

    vite preview

    可以先运行一下的意思是

    开启了一个静态 Web 服务器,并没有构建项目。需要先运行 npm run build 后,再运行 npm run serve 可以正常访问

    最后我将代码改成了这个

      "scripts": {
        "serve": "vite serve",
        "build": "vite build",
        "dev": "vite --host"
      },
    

    在这里插入图片描述

    若将这个代码
    变成这个
    在这里插入图片描述
    在这里插入图片描述
    仍然可以运行
    但是没哟network

    取消注释后
    在这里插入图片描述
    又 回来了

    参考:https://blog.csdn.net/qq_41664096/article/details/121312823

    展开全文
  • 运行npm install成功下载node_modules文件,运行npm run serve时报错,不知道该怎么解决,在这卡了半天了,有没有大神可以指教一二
  • npm run dev因为端口号被占用报错

    千次阅读 2020-03-12 11:22:26
    Error: listen EADDRINUSE: address already in use :::8084 at ... A complete log of this run can be found in: npm ERR! C:\Users\Sapling\AppData\Roaming\npm-cache\_logs\2020-03-12T03_19_45_821Z-debug.log
  • scripts:执行 npm 脚本命令简写,在命令行中通过执行npm run+变量来执行这段脚本 把“server”修改成“dev” ,你用npm run dev 就不会报错了 反过来你想用npm run server 就改成“server” 扩展:package.json...
  • Vue运行npm run dev 时修改端口

    千次阅读 2018-05-18 10:22:00
    进入项目文件的config文件夹E:\myapp\myproject\config,找到index.js,修改里面的8080端口,改成8088(确定不被别的程序使用的都可以) 转载于:https://www.cnblogs.com/yongyang/p/9054892.html...
  • 启动vue项目npm run serve一直报错

    千次阅读 2020-01-02 15:56:23
    忘记截图了 报错信息包括 spawn cmd ENOENT at Process.Child...This is probably not a problem with npm. There is likely additional logging 百度了下改过端口,貌似没用 还有说在环境变量中添加C:\Windows\...
  • server的所有选项 devServer: { port: port, // 端口号 host: 'localhost', https: false, // https:{type:Boolean} open: true, //配置自动启动浏览器, // index: '/account.html', //启动项目后,默认进入的页面...
  • 主要介绍了Vue开发环境中修改端口号的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • npm启动报错——端口被占用

    千次阅读 2019-08-20 10:32:55
    1.直接右键,使用Git Bush窗口,在这个窗口中用npm start启动,不管你是直接点“X”关闭,还是按两次Ctrl+C关闭,都会造成下次启动,端口被占用而启动失败。 2.先按着“Shift”再右键,此时会多出一个选项:在...
  • 当使用npm start命令启动时,默认监听的是8080端口,可以使用-p参数指定端口,比如需要改为监听8888端口: npm start -- -p 8888 注意:命令行中需要加入-- 运行以后,如下图所示: ...
  • npm run serve 启动vue项目时,报错 throw er; // Unhandled ‘error’ event; 纳闷了昨天下午下班时都是没有问题的,除了问题就解决呗! 解决方案: 产生这一问题的原因有两个: 1.本机端口和设置的ip地址不一致 2....
  • npm run serve > blog@0.0.0 serve /Users/bigcat/webpage > vite preview events.js:353 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE: address already in use 127.0.0.1:...
  • npm 中启动set WEBPACK_ENV=dev && webpack-dev-server --port 8088 --inline 时总是node,js占用端口 ,总是要任务管理器中干掉node
  • 我们在开发vue.js的mvvp项目时候,会执行npm install ,npm build,npm dev等等。其实这些都和package.json有关。 { "name": "mfw-ui", "version": "1.0.0", "description": "My Framework ui", "author": ...
  • 解决方法 cnpm uninstall cnpm install
  • npm run dev ip访问

    千次阅读 2018-01-30 20:14:02
    在根目录下面的/config/index.js文件 修改host 为ip地址即可 npm install -g npm //更新npm到最新版本
  • 关于vue的npm run dev和npm run build

    千次阅读 2018-01-03 16:14:59
    转自:.... . .关于vue的npm run dev和npm run build├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js │ ├─vue-l
  • veu npm run dev指定host

    2019-10-08 00:39:01
    但是,在接手的目前项目中,解注释host后,npm run dev并有变为 http://192.168.43.230:8087,依然是http://localhost:8087 经过一番查找,发现要在build/dev-server.js文件中配置,如下。 ...
  • 部署成功后运行npm run dev,能访问,但是有一个问题就是退出控制台,就访问不了,这时需要后台持久运行npm run dev 1.先退出该容器,进行环境配置 vi ~/.bash_profile PATH=$PATH:$HOME/bin:/usr/bin source ~/....
  • /** * Created by Administrator on 2020/5/28. */ const webpack = require('webpack') ...//const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin') const path = require('path') ...
  • 运行npm run build之后,会生成一个dist文件夹,里面的目录结构大概是这样的:生成完的文件我们怎么来运行呢?直接在本地打开inde.html是无法运行的,打包的时候有提示:构建文件应该通过HTTP服务器提供服务。所以...
  • 之前通过 cmd 方式创建了一个 webpack 项目,今天再次打开运行,无论是在电脑终端还是在 VSCode 终端里直接通过命令 npm run dev 运行都报错,即使在电脑终端里使用 cnpm 方式也不行。 报错如下: 后来,经过一番...
  • 显示如下 npmrun serve则表示你使用的是npm创建的项目。 如何切换包管理器呢? 管理器和淘宝npm镜像源会存入~/.vuerc 此文件如果是windows环境,则存在了C:/user下: 按需求修改成yarn 或npm ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,733
精华内容 1,493
关键字:

npmrunserve端口