开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

vuejs npm dev server不显示更新的输出

问题描述：vuejs npm dev server不显示更新的输出

解答： vuejs是一个流行的前端开发框架，npm是Node.js的包管理器，dev server是vue-cli提供的开发服务器。当我们在开发中使用vuejs时，有时会遇到npm dev server不显示更新的输出的问题。

这个问题的原因可能有多种，下面列举几种可能的原因和解决方法：

检查代码更新：首先要确保代码有更新，可以通过查看代码文件的修改时间来确认。如果代码没有更新，则dev server不会显示更新的输出。在确保代码有更新后，重新运行npm dev server即可。
缓存问题：npm dev server在运行过程中会对文件进行缓存，如果缓存没有被正确更新，就会导致dev server不显示更新的输出。解决方法是删除缓存文件，然后重新运行npm dev server。可以使用以下命令删除缓存：
缓存问题：npm dev server在运行过程中会对文件进行缓存，如果缓存没有被正确更新，就会导致dev server不显示更新的输出。解决方法是删除缓存文件，然后重新运行npm dev server。可以使用以下命令删除缓存：
端口被占用：dev server默认会使用8080端口进行监听，如果该端口被其他程序占用，就会导致dev server无法正常工作。可以尝试更换端口，修改vue.config.js文件中的devServer配置，将端口改为其他未被占用的端口，然后重新运行npm dev server。
端口被占用：dev server默认会使用8080端口进行监听，如果该端口被其他程序占用，就会导致dev server无法正常工作。可以尝试更换端口，修改vue.config.js文件中的devServer配置，将端口改为其他未被占用的端口，然后重新运行npm dev server。
插件或配置问题：有时候某些插件或配置可能会导致dev server不显示更新的输出。可以尝试将插件或配置进行调整或移除，然后重新运行npm dev server。

总结：当vuejs的npm dev server不显示更新的输出时，我们可以先检查代码是否有更新，然后删除缓存文件，尝试更换端口，调整或移除插件或配置来解决问题。希望以上解答能对你有所帮助。

腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
腾讯云容器镜像服务（TCR）：https://cloud.tencent.com/product/tcr
腾讯云 CDN 加速（CDN）：https://cloud.tencent.com/product/cdn
腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（TBC）：https://cloud.tencent.com/product/tbc
腾讯云智能视频（AI Video）：https://cloud.tencent.com/product/ai-video
腾讯云物联网开发套件（IoT Explorer）：https://cloud.tencent.com/product/ioe
腾讯云移动直播 SDK（MLVB）：https://cloud.tencent.com/product/mlvb

相关搜索:Vuejs和Nodejs部署到heroku：$ npm run dev有效，但$ node server.js无效 webpack-dev-server的npm安装需要'-g‘的是谁？带有laravel显示错误的Vuejs不工作 webpack-dev-server@3.1.14在使用npm审计时获取缺失的源码验证 to_sql不更新ms server中的表 Gridview不刷新显示更新的记录 workbox不拾取使用webpack-dev-server的内存中的文件如果index.html不直接位于输出根中，如何为webpack-dev-server配置各种路径选项？Bs datepicker的值更新，但显示值不更新 Vuejs不更新我的界面，有人知道为什么吗？NPM run serve正在显示localhost上我的vuejs项目的旧状态使用npm uuid包的React 16表数据更新操作不更新行数据是否可以在使用webpack-dev-时显示进度，比如使用webpack-dev-server中的--progress选项？Vuex 4中的存储Vuejs 3不工作，并显示空白结果将webpack-dev-server更新到3.2.1后的Vue.js项目-抛出错误 dev k8s master显示额外的负载，导致无法获得获取pods的输出使用vite和typescript编译器构建时，使用three.js/react/vite创建的项目会中断，但使用npm run dev (dev server)可以正常工作。简单的问题使用Dash，我如何显示变量的更新输出？如何在不更新状态的情况下显示模态使用MTKView显示解码的视频流会导致不希望的模糊输出

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Vue————Vue v2.7.14 入口文件【二】

前言按着我的习惯，拿到一个项目首先我会查看项目下的README.md其次查看package.json，这里也不例外看过 README.md 后，来看下package.json; GitHub github...dev 是使用rollup来进行打包的，这时候我们直接看dev命令对应的配置文件（scripts/config.js）里面有些什么。...如果对象是响应式的，确保删除能触发更新视图。 // 这个方法主要用于避开 Vue 不能检测到 property 被删除的限制，但是你应该很少会使用它。...// 在修改数据之后立即使用这个方法，获取更新后的 DOM。...// 插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。

821 0

Vue.js系列之入门手册整理

build.js check-versions.js dev-client.js dev-server.js utils.js vue-loader.conf.js...检测npm的版本，不能随意修改 dev-client.js和dev-server.js 服务器脚本，不能随意修改(PS:借助于nodejs，$npm run dev 就可以打开一个server，运行vuejs...一些基础的配置文件，不能随意修改 webpack.dev.conf.js 开发模式的基础配置文件，不能随意修改 webpack.prod.conf.js 生产模式的基础配置文件，不能随意修改 config...定义了开发模式下的代理服务器 dev.env.js 开发环境模式的配置文件 prod.env.js 生产环境模式的配置文件 dist 打包之后的文件所在目录 node_modules node项目需要的第三方库...，node版本至少大于6.11.5，有遇到如上类似错误的，要检查你安装的nodejs版本，最新版的devtools要求node版本至少大于6.11.5，解决方法就是重新安装nodejs 安装之后vue图标不显示

1.4K2 0

Vue.js入门手册整理

的说明文档 build build/ build.js check-versions.js dev-client.js dev-server.js utils.js...打包构建使用，不能随意修改 check-version.js 检测npm的版本，不能随意修改 dev-client.js和dev-server.js 服务器脚本，不能随意修改(PS:借助于nodejs...，$npm run dev 就可以打开一个server，运行vuejs) units.js css/sass 等文件的生成工具脚本，不能随意修改 vue-loader.conf.js 用于辅助加载vuejs...8080），定义了图片文件夹（默认static)，定义了开发模式下的代理服务器 dev.env.js 开发环境模式的配置文件 prod.env.js 生产环境模式的配置文件 dist 打包之后的文件所在目录...，node版本至少大于6.11.5，有遇到如上类似错误的，要检查你安装的nodejs版本，最新版的devtools要求node版本至少大于6.11.5，解决方法就是重新安装nodejs 安装之后vue图标不显示

2.2K5 0

Vue-cli教程

Ps：由于版本实时更新和你选择安装的不同（这里列出的是模板为webpack的目录结构），所以你看到的有可能和下边的有所差别。...在开发环境下，在命令行工具中运行npm run dev 就相当于执行 node build/dev-server.js .也就是开启了一个node写的开发行建议服务器。...webpack配置相关我们在上面说了运行npm run dev 就相当于执行了node build/dev-server.js,说明这个文件相当重要，先来熟悉一下它。我贴出代码并给出重要的解释。...package.json的scripts 字段： 1234 "scripts": { "dev": "node build/dev-server.js", "build": "node build...这个文件里就配置了一个路由，就是当我们访问网站时给我们显示Hello.vue的内容。五、Hello.vue文件解读：这个文件就是我们在第一节课看到的页面文件了。

2K8 0

【黄啊码】npm：‘webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序

问题：解决办法：命令：npm install 嗯，然后就好了为啥？不需要问？问了就是依赖包没装好

1611 0

Vue入门第一本学习笔记

都显示出来，如何解决？...中 npm install # 执行 dev 脚本（也在 package.json 中），即项目开发模式 npm run dev # npm run build 执行 build 脚本，项目文件打包生成...提醒：要是执行命令 npm run dev 后出现错误，有可能是 node 版本导致的，请将 node 更新到最新版，对于 win 用户来说，直接官网再下载一个最新版本的安装包来安装即可。...接下去每次要对项目进行开发时，就到项目根目录，右键+Shift 键，选择在此处打开命令窗口，然后执行命令 npm run dev，即可在 localhost:8080 地址上看到运行的项目，修改代码并保存后页面还会自行更新...（使用了热加载技术 webpack-dev-server --inline --hot）。

1.3K1 0

vue-cli 搭建

在开发环境下，在命令行工具中运行npm run dev 就相当于执行 node build/dev-server.js .也就是开启了一个node写的开发行建议服务器。...字段和devDependencies字段 dependencies字段指项目运行时所依赖的模块； devDependencies字段指定了项目开发时所依赖的模块 webpack配置相关 dev-server.js.../static')) // 让我们这个 express 服务监听 port 的请求，并且将此服务作为 dev-server.js 的接口暴露 module.exports = app.listen(...package.json的scripts 字段： "scripts": { "dev": "node build/dev-server.js", "build": "node build...这个文件里就配置了一个路由，就是当我们访问网站时给我们显示Hello.vue的内容。五、Hello.vue文件解读：这个文件就是我们在第一节课看到的页面文件了。

1.4K2 0

VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用

WebStorm缺点：性能方面VsCode远好于WebStorm；　　WebStorm优点：代码引用追踪Ws有VsCode无，控制台输出WS有着色能看出那块代码有问题，VsCode无着色控制台日志和bug...，在搜索里面输入JavaScript (ES6) snippets/NPM/Vue 2 Snippets；　　第二步调试配置：VsCode第一次运行只需要把项目切换到项目根目录/build/dev-server.js...；　　②.配置vuejs调试js就不需要输npm run dev 启动命令。...（目前只有英文版，社区正在进行中文版的翻译）”，可见vuejs在服务器端渲染是非常吃力不讨好的（当然有兴趣的朋友可以去试一下ssr的搭建和渲染，对于深入了解一门语言的原理是很有帮助的），既然vuejs不擅长做服务器端渲染...具体常用的ajax请求的调用方式和方法，我这里就不细说了，需要的请自行百度，vue官方推荐的交换框架是axios查看详情:https://npm.taobao.org/package/axios； --

2.4K5 0

Mac安装vue.js开发环境

，如果显示“https://registry.npm.taobao.org”则说明配置成功 npm config get registry （3）然后安装淘宝的cnpm（如果该步骤报错“rollbackFailedOptional...npm run lint -- --fix (or for yarn: yarn run lint --fix) npm run dev Documentation can be found...at https://vuejs-templates.github.io/webpack 2、启动项目（1）安装项目依赖，启动项目需要先安装项目所需依赖，就跟java的maven项目需要先更新dependencies...cnpm run dev 启动成功的结果： > vue-demo-01@1.0.0 dev /usr/local/projects/vue/VueDemo > webpack-dev-server --...server { listen 80; server_name 127.0.0.1; location / { root /data

5.6K4 1

尤雨溪写的100多行的“玩具 vite”，十分有助于理解 vite 原理

于是各种搜寻值得我们学习，且代码行数不多的源码。在 vuejs组织[1] 下，找到了尤雨溪几年前写的“玩具 vite”vue-dev-server[2]，发现100来行代码，很值得学习。.../vue-dev-server-analysis.git cd vue-dev-server-analysis/vue-dev-server # npm i -g yarn # 安装依赖 yarn #...或者克隆官方仓库 git clone https://github.com/vuejs/vue-dev-server.git cd vue-dev-server # npm i -g yarn # 安装依赖...如果你的VSCode不是中文（不习惯英文），可以安装简体中文插件[7]。如果 VSCode 没有这个调试功能。建议更新到最新版的 VSCode（目前最新版本 v1.61.2）。...参考资料 [1] vuejs组织: https://github.com/vuejs [2] vue-dev-server: https://github.com/vuejs/vue-dev-server

8052 0

npm 及vue，router，webpack安装快速起步

taobao来指定要使用的镜像源：然后通过nrm test npm来测试速度：注意：有教程推荐大家使用cnpm命令，但是使用发现cnpm有时会有bug，不推荐。...2.安装vue 先输入：npm init -y 进行初始化初始化结果显示如下即可 ?...官网：https://router.vuejs.org/zh-cn/ 使用npm安装：npm install vue-router --save 引入依赖 4.安装webpack Webpack 是一个前端资源的打包工具...热更新web服务安装插件 npm install webpack-dev-server --save-dev package.json中配置script “scripts”: { “dev”:...“webpack-dev-server --inline --hot --open --port 8080 --host 127.0.0.1” }, –inline：自动刷新 –hot：热加载 –

9533 0

Vue 脚手架项目分析

npm install --save-dev babel-preset-stage-2 babel-preset-env babel-preset-env是一个新的预设，可以让你指定一个环境并自动使能需要的插件...minRatio: 0.8 // 最小压缩比达到0.8的时候会被压缩 }) ) } npm run dev 当我们熟悉了上面的配置之后，下面让我们来看看当我们执行了npm run...在package.json的文件中我们定义了dev的运行脚本 "scripts": { "dev": "node build/dev-server.js", "build": "node...build/build.js" } 当运行 npm run dev的命令时，实际上会运行 dev-server.js文件。...// webpack-dev-middleware的作用 // 1.将编译后的生成的静态文件放在内存中,所以在npm run dev后磁盘上不会生成文件 // 2.当文件改变时,会自动编译。

1.8K4 0

Webpack4 新手完全攻略

, 如果以后配置更新了,也方便查看更新的文档如果不想自己配置, 可以直接拷贝最后的配置文档到自己的项目中, 所有的案例资源附在了文章末尾, 欢迎下载学习 ?.../externals/ npm install -S vue 支持vue.js打包 # 支持vue单文件组件加载, 参考:https://vue-loader.vuejs.org/guide/ npm...保存即生效,无需刷新更新数据 # 自动打包工具参考: https://webpack.js.org/guides/development/ npm install -D webpack-dev-server...description": "", "main": "index.js", "scripts": { "build": "webpack", "start": "webpack-dev-server...vue-template-compiler": "^2.5.16", "webpack": "^4.6.0", "webpack-cli": "^2.0.15", "webpack-dev-server

9649 0

进阶| Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架（下篇）

这个是默认的行为，如果想要把各种js和css做特殊处理，或输出更多内容，可以参考手工注入： https://ssr.vuejs.org/zh/build-config.html#manual-asset-injection...至此，粗略的SSR就已经完成了。 project.json中加入先npm run build，然后npm start就可以了。...跟上一篇文章完成的架构不一样，这里不通过webpack-dev-server启动，所以没有热更新的功能。对于实际开发而言，每次修改都要build再run，肯定太麻烦。...4 搭建热更新功能这里，借鉴了官方例子，可以简单copy setup-dev-server.js。 setup-dev-server.js的代码比较长，就不列出来了。...那么，使用node server/server就能启动热更新服务器了。到这里，我们实现了一个没有动态数据的SSR版本，方便初学者对整个概念的理解。

9642 0

Webpack组件库打包超详细指南

这与我们创建一个普通vue页面的操作是一样的，具体配置可以看webpack.demo.js。我们添加一个打包命令，用webpack-dev-server跑一个示例页面的服务。..."test": "webpack-dev-server --config build/webpack.demo.js --open --hot", 需要注意的是，由于我们一开始是创建的webpack-simple...，不是完整版的webpack模版，需要主动在html文件里面引入打包输出的js文件dist/main.js，如果你的示例页面一片空白，请检查一下输出文件是否正确引入。...文档生成 jsdoc 这里选择用jsdoc来自动生成文档（后续发现，这里直接用jsdoc生成的文档比较不好看，示例不能清楚说明用法，缺少图片和GIF演示，jsdoc做为及时更新的API文档是够用的，但为了让库的用户更方便入手.../src/*" npm run build:doc 就能生成文档。 0. 参考文章如何打造一套vue组件库 VueJS文档生成

3.1K1 1

package.json——从vue的package.json来详细说明package.json内容

前言 Vue2.7.14源码阅读的补充内容,~c package.json c~ 文件是项目的清单。它可以做很多完全互不相关的事情。例如，它是用于工具的配置中心。...它也是 npm 和 yarn 存储所有已安装软件包的名称和版本的地方; 内容 { "name": "vue",...TARGET:runtime-esm", "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:server-renderer..."node scripts/build.js", "build:ssr": "npm run build -- runtime-cjs,server-renderer", "build:...run server-renderer", "test:sfc": "vitest run compiler-sfc", "test:e2e": "npm run build -- full-prod

1331 0

微服务 day02：CMS前端开发

0x03 webpack的缺点 1、配置有些繁琐 2、文档不丰富 0x04 安装 npm node.js 已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本，node可以直接去官网下载安装...三、webpack-dev-server 0x01 测试环境搭建 webpack-dev-server 开发服务器，它的功能可以实现热加载并且自动刷新浏览器。...0x02 安装配置安装webpack-dev-server 使用 webpack-dev-server 需要安装webpack、 webpack-dev-server 和 html-webpack-plugin...配置webpack-dev-server 在package.json中配置script "scripts": { "dev": "webpack-dev-server --inline --hot...双击 dev。注意：dev 就是在 package.json 中配置的 webpack dev server 命令。发现启动成功自动打开浏览器。

1.7K0 0

Vue2.0 新手完全填坑攻略——从环境搭建到发布

cnpm install vue-router vue-resource --save 启动项目 npm run dev 填坑(以下坑可能由于 vue2.0 导致其他相关编译打包工具没更新导致的.../client' @ ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js 1:13-37 @ ./~/.2.1.0-beta.8@webpack-dev-server...cnpm install babel-traverse --save-dev cnpm install json5 --save-dev ...不写了，请把全部把旧的环境全部清除，更新到最新版本...cnpm install vue-router vue-resource --save 启动项目 npm run dev 填坑(以下坑可能由于 vue2.0 导致其他相关编译打包工具没更新导致的...cnpm install babel-traverse --save-dev cnpm install json5 --save-dev ...不写了，请把全部把旧的环境全部清除，更新到最新版本

1.8K5 0

vue-cli脚手架npm相关文件解读（9）configindex.js

/utils.js 5、build/vue-loader.conf.js 6、build/build.js 7、build/dev-server.js 8、build/check-versions.js...see http://vuejs-templates.github.io/webpack for documentation. var path = require('path') module.exports.../prod.env'), // 相对路径的拼接，假如当前跟目录是config，那么下面配置的index属性的属性值就是dist/index.html index: path.resolve.../dist'), // 输出目录 assetsSubDirectory: 'static', // 子目录 assetsPublicPath: '/', // 发布地址，例如HTML中引用...// 当执行`npm run build --report`时生成构建报告 }, dev: { env: require('.

9506 0

Markdown 拓展-使用 vue.press 生成网站

在开发过程中，我们启动一个常规的开发服务器 (dev-server) ，并将 VuePress 站点作为一个常规的 SPA。如果你以前使用过 Vue 的话，你在使用时会感受到非常熟悉的开发体验。...YARN NPM yarn docs:dev VuePress 会在 http://localhost:8080在新窗口打开启动一个热重载的开发服务器。...当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。...输出 VuePress 2 已经发布！目录如果你想要把当前页面的目录添加到 Markdown 内容中，你可以使用 [[toc]] 语法。...使用的是默认的构建输出目录 (.vuepress/dist) ；注意构建产物的路径问题，需要设置正确的 base 选项。

1.5K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭