vue+webpack+nodemon实时打包项目,自动重启项目Nodemon

最新推荐文章于 2024-03-05 13:53:09 发布

css3html5csdn

最新推荐文章于 2024-03-05 13:53:09 发布

阅读量886

点赞数

分类专栏： webpack 文章标签： vue+webpack+nodemon实时打包项目自动重启项目Nodemon

本文链接：https://blog.csdn.net/qq_38402659/article/details/99305245

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实时打包项目方法：

1,安装nodemon
2,package.json重新编写start方法
监控src文件夹下所有的html/vue/js/less文件有更改则自动打包

  "scripts": {
    "dev": "node build/dev-server.js",
    "dist": "nodemon --watch src -e html,vue,js,less build/build.js",
    "build": "node build/build.js",
    "start": "node build/start.js",
  },

安装了nodemon之后,在安装依赖就不用了停止服务重新启动了

https://www.npmjs.com/package/nodemon

其他:
维护期间发现个问题，当更改代码后会不停的打包，持续四五次才会停止，检测发现打包是成功的，最后只好卸载了nodemon重新安装，可以正常工作了。

npm uninstall nodemon
npm install -g nodemon

修改代码后，需要重新启动 Express 应用，所做的修改才能生效。若之后的每次代码修改都要重复这样的操作，势必会影响开发效率，本文将详细介绍Nodemon，它会监测项目中的所有文件，一旦发现文件有改动，Nodemon 会自动重启应用

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

css3html5csdn

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Webpack

酷爱前端的小陈博客

04-15

456

1. webpack 中的插件 1.1.什么是 webpack 概念：webpack 是前端项目工程化的具体解决方案。主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。注意：目前Vue，React 等前端项目，基本上都是基于webpack 进行工程化开发的。 1.2. 创建列表隔行变色项目 ① 新建项目空白目录，并运行n...

nodemon-webpack-plugin：一个使用Nodemon启动并重新加载服务器的Webpack插件

02-05

Nodemon Webpack插件使用监视并重新启动模块的输出文件（大概是服务器），但仅当webpack处于监视模式时（即--watch ）。无需另外安装，配置和运行Nodemon。安装 npm install nodemon-webpack-plugin --save-dev 用法 const NodemonPlugin = require ( 'nodemon-webpack-plugin' ) ; // Ding module . exports = { entry : './src/server.js' , output : { path : path . r

参与评论您还未登录，请先登录后发表或查看评论

webpack-dev-server启动的前端项目使用nodemon监听自动重启

风烟

01-24

801

原来启动是这样 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 修改webpack需要手动重启，现在使用nodemon配置为自动重启 "start": "nodemon --exec npm run dev", "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 然后配置

Webpack使用nodemon实时打包编译

weixin_33850015的博客

07-21

809

2019独角兽企业重金招聘Python工程师标准>>> ...

Vue认知重启之创建项目

Mrbignose的博客

12-30

300

新手请看这里如果你是第一次接触，并且想学习vue，建议你使用以下的方式来引入vue。在你熟悉的目录下创建一个html文件，将以下的代码复制到head标签中即可  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 或...

vue项目监听文件变化自动重启webpack服务器

weixin_44748107的博客

09-16

2220

问题：因为每次更换开发环境时，都需要手动重启一次服务器。以下的方法可以实现自动化重启。一、安装nodemon插件 nodemon插件，这里有一篇详细的入门介绍。这里只有我的配置进行记录。首先我们需要在开发环境中安装nodemon依赖 npm install --save-dev nodemon 在项目的package.json文件中的scripts对象下添加开启nodemon的操作 // package.json "scripts": { "serve": "vue-cli-servi

vueexpresswebpack项目模版

08-10

3. **启动脚本**：`npm start` 或 `yarn start` 用于启动开发环境，可能使用 `nodemon` 监听文件变化自动重启服务器；`npm build` 或 `yarn build` 用于生产环境的打包。 4. **中间件**：Express 可能会使用一些...

vue 打包后的文件部署到express服务器上的方法

08-29

在`package.json`中，添加"server"和"start"脚本，分别用于使用nodemon（自动重启服务器）和直接启动Express服务器。`npm run server`或`npm run start`即可启动服务器，此时访问127.0.0.1:3000将看到Vue的欢迎界面...

详解如何从零开始搭建Express+Vue开发环境

12-12

根据项目需求，安装Vue、Vue-Router、Webpack、Vue-loader、Babel、nodemon等相关依赖。 6. 配置Webpack：配置Webpack以处理Vue组件、CSS预处理器、图片和字体资源等，同时设置开发服务器，使热替换功能生效。 ...

nodemon包的使用

fghrygfhd5的博客

09-13

Nodemon 安装之后当我们的js文件修改后（保存）将会自动重其服务端，那么我们就不需要手动去重新停止再重启 nodemon是一种工具，可在检测到目录中的文件更改时通过自动重新启动节点应用程序来帮助开发基于node.js的应用程序。文档介绍 https://www.npmjs.com/package/nodemon 安装命令 npm install -g nodemon 安装之后那么我们的启动代码为 nodemon server.js 注意，server.js是我这里的.

npm + webpack

dlgd12591的博客

09-27

126

node-day3-es6模块化+webpack

最新发布

weixin_59017683的博客

03-05

1147

目前我们学习了两套导入导出的语法Node环境默认的CommonJS语法导出：module.exports = 内容导入：const 变量 = require（‘xxx')ES6模块化语法（ES Module)导出：export导入：import总结：在node环境中，仍然使用CommonJS语法；在后期的项目开发中，就使用ES Module以模块化、组件化、规范化、自动化为基础，进行前端项目开发的方式，叫做前端工程化.

【享你所想】Nodejs+koa+vue 博客系统开发教程+源码

classbao-cn与您分享

01-04

331

Nodejs+koa+vue 网页端平台开发教程

node项目如何监听改变自动重启，node调试工具nodemon

weixin_44434938的博客

05-12

602

提示：session使用过程中文章目录前言一、依赖和邮箱设置二、使用步骤1.vue中Login.vue2.vue中axios.js3.koa中routes.js4.koa中emailCode.js5.koa中app.js总结前言 koa发送验证码至邮箱，QQ邮箱发送一、依赖和邮箱设置 npm install nodemailer --save 二、使用步骤 1.vue中Login.vue 代码如下（示例）： <template> <div class="login_bo.

简单配置webpack，手写笔记

m0_63161369的博客

05-29

219

webpack （版本都使用4点多的即可） webpack默认只能打包 .js 后缀名结尾的模块。其他非 .js后缀名结尾的模块需要调用 loader加载器才能正常打包，否则报错初始化项目 npm init -y 创建src目录 1.安装npm i webpack@5.5.1 webpack-cli@4.2.0 -D // -D 只需要在开发版本使用配置 2.配置 2-1.项目根目录创建webpack.config.js的webpack配置文件 const path=requ...

webpack 快速掌握

qq_52851550的博客

07-26

264

webpack看这一篇就够了！

webpack - 包构建工具从基础配置到打包发布

tian_tian_gong的博客

11-13

1537

启动vue项目同时启动node

weixin_53607765的博客

04-26

500

【代码】启动vue项目同时启动node。

nodemon启动出错，无法加载文件解决方法

qq_56111476的博客

03-31

2435

今天用nodemon启动文件的时候发现了出现了报错如下 node启动没有问题但是nodemon启动就会报红解决方法如下： 1、win+x打开命令提示符（管理员），输入set-ExecutionPolicy RemoteSigned，再输入A（ALL全部）或者Y（YES）问题解决！顺便一提，关闭node的全部进程只要输入taskkill /f /im node.exe就行了在VS Code里关闭只要Ctrl+C就行 ...

express nodemon

08-21

Express是一个流行的Node.js Web应用程序框架，而Nodemon是一个开发工具，用于在开发过程中自动监视文件更改并重新启动Node.js应用程序。结合使用Express和Nodemon可以让开发过程更加高效。你可以通过以下步骤来使用Express和Nodemon： 1. 首先，确保你的计算机上已经安装了Node.js和npm（Node.js包管理器）。 2. 创建一个新的项目目录并在终端中进入该目录。 3. 运行以下命令来初始化一个新的Node.js项目，并生成一个package.json文件： ``` npm init -y ``` 4. 接下来，安装Express和Nodemon作为项目的依赖项： ``` npm install express nodemon ``` 5. 在项目目录中创建一个名为app.js或index.js的文件，并使用以下代码初始化一个Express应用程序： ```javascript const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('Hello, World!'); }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 6. 在package.json文件中添加一个"start"脚本，用于启动应用程序： ```json "scripts": { "start": "nodemon app.js" } ``` 7. 保存修改后的package.json文件，并在终端中运行以下命令来启动应用程序： ``` npm start ``` 现在，你的Express应用程序将在localhost的端口3000上运行，并且Nodemon将会监视文件更改并自动重新启动应用程序。这样，在开发过程中，你可以实时看到对代码的更改所产生的效果。