vue启动后控制台输出日志信息

最新推荐文章于 2024-08-20 09:41:26 发布
原创 最新推荐文章于 2024-08-20 09:41:26 发布 · 6.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍如何在Linux系统中，通过编辑sysctl.conf或临时设置fs.inotify.max_user_watches来解决npm run serve启动Vue项目时的日志问题，提供两种操作方法以确保项目顺利运行。

1. 问题描述

在使用 npm run serve 启动vue项目时，控制台输出了许多日志信息
在这里插入图片描述

2.发生原因

linux系统的限制导致出现了这个问题，这里需要设置一下参数：fs.inotify.max_user_watches

3.解决办法

第一种解决方式： 编辑sysctl.conf文件，添加如下内容

fs.inotify.max_user_watches=524288

在终端执行 sysctl -p ,或者使用 sudo sysctl --system查询系统配置是否成功
成功后使用npm run serve重启即可
在这里插入图片描述
第二种解决方式：
从终端执行以下命令(设置参数，并写到文件中)然后重启即可

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

学习注定是一条漫长又艰苦的道路，没有捷径可言，所有人都一样。熬过去，你就赢了!

Vue中打印日志无效怎么解决？
TechGlide的博客
10-03 1570
使用Vue Devtools：Vue Devtools是一个用于调试Vue应用程序的浏览器扩展。语句之前，请确保浏览器的开发者工具已经打开。在开发者工具中，切换到"控制台"选项卡，以查看。当按钮被点击时，将会在浏览器的控制台中显示这条消息。确保在浏览器中打开控制台，并单击按钮以查看输出。检查代码中的语法错误：首先，确保你的代码没有语法错误。如果问题仍然存在，请仔细检查你的代码和开发环境设置，以确保没有其他因素导致这个问题的发生。请仔细检查你的代码，确保没有拼写错误、缺少分号或其他常见的语法错误。
vue-cli3 移除生产环境console打印的日志
weixin_39964419的博客
09-15 1904
vue 移除生产环境console打印的日志
vite+vue本地开发代理查看代理详情日志
wobofan2006的博客
09-19 1988
如下这般在vue-cli里有效的logLevel: 'debug’在vite环境下无效。然后要在package.json的启动命令里加上–debug。
有趣的代码注释
jimmychan的博客
10-30 737
<!-- :: :;J7, :, ::;7: ,ivYi, , ;LLLFS: :iv7Yi ...
VUE.JS打日志
weixin_50733737的博客
11-10 1839
mounted () { console.log(this.$route.meta.keepAlive, '9999') }
vue.js:基于nodejs使用log4js输出日志文件
热门推荐
奋斗鱼
11-29 1万+
一、问题 开发web项目过程中，常规的console.log()只是将信息反映在了浏览器的控制台，我们经常需要输出到文本日志文件，以便开发调试和维护排查。 下面介绍log4js在vue项目中的部署与使用。 二.解决方案 1.安装log4j // 注意：如果只执行npm install XXX,没有指定安装到那种环境下的“后缀”，就会发现node-modules中安装了，但是package.json中没有的情况。 // 1、保存到开发依赖(devDependencies): npm install
Vue启动记录
xnian_的博客
05-24 436
命令启动 进入vue文件目录，找到package.json 当前目录按shift+右键，进入cmd，使用npm run start启动 成功
Vue项目启动过程全记录（node.js运行环境搭建）
非专业Bug开发工程师的博客
02-18 3731
运行Vue项目前，我们需要先配置node.js环境，因此此文章包括node.js运行环境的搭建过程记录
在浏览器开发者工具中查看vue项目的打印日志
听海边涛声
05-14 1204
在浏览器开发者工具中查看vue项目的打印日志
nodejs将调试日志输出到文件
weixin_51232422的博客
07-11 1274
首先确保你的电脑安装了node.js和npm，可以通过在CMD或者Powershell中输入node -v或npm -v查看当前node和npm的版本。随后输入安装MySQL和其他必要依赖，新建log.js文件。
electron + vue编写日志文件输出功能
总柴的博客
02-11 2488
需求 将软件各个模块中需要输出日志的位置进行统一的日志输出，提高软件可维护性，且日志文件按照时间进行区分（一天一个日志文件）。 效果： 文件夹： 文件： 实现： 主进程中： background.ts: import { ipcMain } from "electron"; app.on("ready", async () => { // ... // 日志文件处理 logFile(); }); // 监听渲染进程中发过来的信息，并存入log日志文件中 ipcMain.on('ou
Vue console.log打印[object Object]
风吟Pro的博客
01-05 2085
情景：想控制台打印个数据，这种打印会因为前面有字符串，而导致整个打印的内容为字符串。非要带点别的消息，就再写个console.log（信息）这样data的数据就不显示数据了，没有参考意义了。不要在console.log中配其他的信息，这样就可以正常打印了。
ruoyi-vue-plus1(控制台相关的输出日志)(p6spy插件)(jackson全局配置)（StopWatch）
hwp_ing的博客
03-08 1894
打开配置我们能发现，项目采用了mp的雪花id作为主键，而雪花id为19位，传到前端会导致精度的缺失，因此，超过该范围的全部转为字符串，其他默认原来的类型。在启动项目时，我们发现日志打印出这样几行字，初始化了jacdson配置，我们去查看一下来源找。发现了这里对于部分范围的数字进行了转为为字符串的操作。StopWatch()定时器的使用比较简单，可参考下面的连接。
Vue+ElementUi 项目中导出日志文件功能的实现
weixin_43181470的博客
08-17 1647
界面上有一个导出按钮，点击按钮，从后台获取日志文件数据，将其在浏览器中导出。
使用vue-cli初始化webpack模板的vue项目，npm run dev 启动时会打印很多日志，影响开发！！！
小蜜蜂的博客
09-19 4242
解决方法： 初始化时package.json中的一个脚本是这样的（高亮）： "scripts": {     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",     "build": "node build/build.js"   }, 此时启动项目，日志会从1%打印到10...
vue json-viewer codemirror-json格式化
weixin_43173924的博客
04-28 6708
1.安装codemirror https://www.npmjs.com/package/vue-codemirror 2.下面是自己写的例子 main.js里面引入 // 代码输入框 import VueCodemirror from 'vue-codemirror' import 'codemirror/lib/codemirror.css' Vue.use(VueCodemir...
vue:带有级别的日志工具， 可打包动态控制debug是否输出
风一样的少年
03-29 1187
功能需求描述 希望打印的日志带有日期 希望上线以后，可以动态控制是否输出debug日志，以便进行调试 针对以上需求，我自己开发了一个工具插件。（我现在还是个小白，有些地方可能使用的不合适，仅供参考了） 针对动态调整debug的描述 我是基于vuex 以及chrom浏览器插件vue实现的。 通过在这里store的状态来控制页面是否输出debug。有个限制就是，无法调整create mount 方法中的debug。 实现 创建插件目录以及插件的js文件 下面是代码了（有点长） var Log5j =
【亲测免费】 Vue.js 日志记录器（vuejs-logger）实用教程
gitblog_00413的博客
08-20 1512
Vue.js 日志记录器（vuejs-logger）实用教程 项目介绍 vuejs-logger 是一个专为 Vue.js 应用设计的日志记录库，兼容 Vue2。它提供了一个可定制的日志功能，允许开发人员根据设定的日志级别来筛选显示的信息。此库的特点包括彩色的控制台消息显示，对于传递给日志器的（可能是响应式的）属性自动执行 JSON.stringify() 处理，以及展示不同严重性的日志消息能力，...
vue配置启动后终端显示localhost和ip访问地址
html5xiaobai的博客
06-11 3341
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 vue配置启动后终端显示localhost和ip访问地址 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Mark
vue前端应用启动后，如何在启动终端中输出一些日志信息
最新发布
03-24
<think>好的，我需要帮助用户了解如何在Vue前端应用启动后，在终端输出日志信息。首先，用户的问题是关于Vue的，所以我要确定Vue的版本。Vue有两个主要版本，Vue 2和Vue 3，以及对应的CLI工具。不过，无论是使用Vue CLI还是Vite（Vue 3默认的构建工具），配置方式可能不同。 用户提到的是“启动终端中输出一些日志信息”，这里的“启动终端”可能指的是当运行npm run serve或npm run dev启动开发服务器时，在终端显示自定义日志。我需要考虑如何在启动脚本中添加日志输出。 首先，Vue项目通常使用npm脚本作为入口，比如在package.json中的scripts字段定义serve、build等命令。用户可能想要在执行这些命令时触发自定义的日志信息。例如，当运行npm run serve时，除了常规的启动信息外，还能输出自定义的消息。 一种方法是在npm脚本中使用并行执行或者前置钩子。例如，在package.json中，可以修改serve脚本为：先运行一个输出日志的命令，再启动服务器。例如："serve": "node log.js && vue-cli-service serve"。但这种方法可能有问题，因为&&是顺序执行，前面的命令必须成功才会执行后面的。如果log.js只是输出日志，可能没问题，但需要注意跨平台兼容性，比如Windows和Unix系统对命令的支持不同。 另一种方法是利用Node.js的child_process模块，在启动服务器时同时执行输出日志的脚本。不过这可能比较复杂，需要编写额外的脚本文件。 另外，Vue CLI和Vite在启动时会触发一些生命周期事件，是否可以利用这些钩子来输出日志？例如，Vue CLI的插件系统允许在服务启动时执行某些操作。但用户可能需要一个更简单的方法，不需要编写插件。 还有一种可能是在项目的入口文件（如main.js）中输出日志，但这通常是在浏览器控制台输出的，而不是终端。因此，这不符合用户的需求，因为用户希望日志出现在启动服务器的终端里。 所以，回到npm脚本，最直接的方法可能是修改package.json中的scripts，使用echo命令来输出日志。例如，在serve脚本中添加echo命令： "scripts": { "serve": "echo '启动Vue应用...' && vue-cli-service serve" } 但这种方法在Windows上可能不兼容，因为echo命令的语法可能不同。为了解决跨平台问题，可以使用cross-env这样的工具，或者使用node.js的脚本。 例如，创建一个脚本文件start.js，里面用console.log输出日志，然后在package.json中调用该脚本： "scripts": { "serve": "node start.js && vue-cli-service serve" } 在start.js中： console.log('自定义启动日志...'); 但这样执行时，node start.js会先运行，完成后才会启动服务器。用户可能需要同时执行，或者在服务器启动后输出日志。但vue-cli-service serve会持续运行，不会退出，所以使用&&可能无法让后面的命令执行。这时可能需要使用并行执行的工具，如concurrently。例如： 安装concurrently： npm install concurrently --save-dev 然后修改scripts： "serve": "concurrently \"echo '启动日志'\" \"vue-cli-service serve\"" 这样可以在启动服务器的同时输出日志。或者，使用shell的&操作符，但同样需要注意跨平台问题。 不过，可能用户的需求是当服务器启动成功后，输出一些日志。例如，当开发服务器成功启动并监听端口后，输出自定义信息。这时需要找到Vue CLI或Vite的生命周期钩子。 Vue CLI的webpack配置中，可以通过devServer的onListening钩子来添加自定义输出。例如在vue.config.js中： module.exports = { devServer: { onAfterSetupMiddleware: (devServer) => { if (!devServer) { throw new Error('webpack-dev-server is not defined'); } console.log('自定义启动日志...'); } } } 不过具体钩子的名称可能因版本而异。Vue CLI内部使用的是webpack-dev-server，所以需要查阅webpack-dev-server的文档，找到合适的钩子。例如，在devServer的onListening事件中处理： module.exports = { devServer: { onListening: function (server) { console.log('服务器已启动，端口：', server.listeningApp.address().port); } } } 这样可以在服务器启动后输出端口信息。用户可能想自定义这样的信息。 对于Vite项目，可以在vite.config.js中利用configureServer钩子： export default defineConfig({ plugins: [ { name: 'custom-log', configureServer(server) { server.httpServer?.once('listening', () => { console.log('自定义启动日志...'); }); } } ] }) 这样，当服务器启动后，会触发监听事件，输出自定义日志。 总结来说，解决方案可能有几种： 1. 修改npm脚本，使用echo或node脚本输出日志，可能结合并行执行工具。 2. 利用webpack-dev-server或Vite的服务器钩子，在配置文件中添加自定义日志。 3. 编写自定义插件，在服务器启动时触发日志输出。 用户可能需要根据项目使用的具体工具（Vue CLI或Vite）来选择合适的方法。需要检查用户的项目配置，确定是Vue CLI还是Vite，然后给出对应的示例。 例如，如果是Vue CLI项目，修改vue.config.js中的devServer配置。如果是Vite项目，使用configureServer钩子。如果用户想要简单的npm脚本修改，可以使用concurrently或者修改scripts字段。 另外，需要注意，如果用户希望在每次启动时都输出日志，而不仅仅是开发服务器启动时，可能需要在构建脚本中也添加类似的信息。但问题中的“启动”更可能指的是运行开发服务器的时候。 最后，要确保给出的步骤清晰，并提供代码示例，让用户能够直接复制并修改配置文件。</think>以下是针对 Vue 前端应用在启动时向终端输出自定义日志的解决方案，分不同构建工具详细说明： --- ### **一、通过 npm 脚本直接输出日志** #### **1. 修改 `package.json` 脚本** 在 `scripts` 字段中添加前置命令，使用 `echo` 或 `node` 脚本输出日志： ```json { "scripts": { "serve": "echo '[INFO] 正在启动 Vue 应用...' && vue-cli-service serve", "dev": "node prelog.js && vite" } } ``` #### **2. 跨平台兼容性处理** - **Windows 适配**：使用 `cross-env` 确保命令跨平台运行 安装依赖： ```bash npm install cross-env --save-dev ``` 修改脚本： ```json { "scripts": { "serve": "cross-env-shell \"echo '[INFO] 正在启动...' && vue-cli-service serve\"" } } ``` --- ### **二、通过构建工具钩子输出日志** #### **1. Vue CLI (Webpack) 项目** 在 `vue.config.js` 中监听 Webpack Dev Server 的生命周期事件： ```javascript module.exports = { devServer: { onAfterSetupMiddleware: (devServer) => { console.log('[INFO] 开发服务器已就绪'); console.log(`[URL] http://localhost:${devServer.options.port}`); } } }; ``` #### **2. Vite 项目** 在 `vite.config.js` 中使用 `configureServer` 钩子： ```javascript export default defineConfig({ plugins: [ { name: 'custom-startup-log', configureServer(server) { server.httpServer?.once('listening', () => { const address = server.httpServer?.address(); const port = typeof address === 'string' ? address : address?.port; console.log('[INFO] 自定义启动日志'); console.log(`[VITE] 运行在端口 ${port}`); }); } } ] }); ``` --- ### **三、高级场景：动态生成启动信息** #### **1. 创建预执行脚本 (`prelog.js`)** ```javascript // 输出带颜色的日志 console.log('\x1b[36m%s\x1b[0m', '[INFO] 正在初始化应用...'); console.log('[TIME] 启动时间:', new Date().toLocaleString()); // 读取环境变量 const env = process.env.NODE_ENV; console.log('[ENV] 当前环境:', env); ``` #### **2. 修改 npm 脚本** ```json { "scripts": { "serve": "node prelog.js && vue-cli-service serve", "dev": "node prelog.js && vite" } } ``` --- ### **四、效果验证** 运行启动命令后，终端会显示类似以下信息： ```bash [INFO] 正在启动 Vue 应用... [INFO] 开发服务器已就绪 [URL] http://localhost:8080 App running at: - Local: http://localhost:8080/ - Network: http://192.168.1.10:8080/ ``` --- ### **五、注意事项** 1. **日志层级控制**： - 开发环境可输出详细信息，生产环境需移除调试日志 - 通过 `process.env.NODE_ENV` 判断环境： ```javascript if (process.env.NODE_ENV === 'development') { console.log('[DEBUG] 详细调试信息'); } ``` 2. **性能影响**： - 避免在热重载时重复输出日志（需将日志写在服务启动的 `once` 事件中） --- ### **六、总结** | 方法 | 适用场景 | 优点 | 缺点 | |--------------------|----------------------------|----------------------|-------------------| | npm 脚本前置命令 | 快速添加简单日志 | 无需修改代码 | 无法获取运行时信息 | | 构建工具钩子 | 需要动态获取端口等运行时数据 | 精准控制输出时机 | 需了解构建工具配置 | | 独立预执行脚本 | 需要复杂逻辑处理 | 灵活扩展性强 | 增加文件管理成本 | 根据项目复杂度选择合适方案，建议小型项目使用 npm 脚本直接输出，中大型项目通过构建工具钩子实现精细化控制。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值