首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

vue-cli:为什么在npm运行build之后,我在Devtools中看到非最小化的javascript代码?

vue-cli是一个基于Vue.js的脚手架工具,用于快速搭建Vue.js项目的开发环境。它提供了一套完整的项目结构和开发工具,帮助开发者更高效地开发Vue.js应用。

在使用vue-cli进行开发时,通常会使用npm run build命令来构建项目,生成用于生产环境的最终代码。在构建过程中,vue-cli会对源代码进行一系列的优化和压缩,包括合并、压缩、混淆等操作,以减小代码体积和提升运行效率。

然而,在Devtools中查看经过npm run build构建后的代码时,可能会发现代码并没有被完全最小化(minified)。这是因为vue-cli默认在构建过程中会生成一个带有source map的版本的代码,用于在开发环境中进行调试和定位问题。

Source map是一种文件,它存储了压缩后的代码与原始代码之间的映射关系。通过使用source map,开发者可以在浏览器的开发者工具中准确地查看和调试源代码,而不是压缩后的代码。这对于开发过程中的调试和错误定位非常有帮助。

因此,当在Devtools中看到非最小化的javascript代码时,实际上是因为vue-cli生成了带有source map的版本的代码。这是一个正常的行为,不会影响最终部署到生产环境的代码。

对于想要进一步了解vue-cli的开发工具和相关概念的用户,可以参考腾讯云的产品介绍页面:Vue CLI

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

最全Vue开发环境搭建

vue安装 1.vue安装依赖npm 从node.js官网下载并安装node,为什么要安装node,因为node自带npm;有空还可以学一下node.js,毕竟node.js也可以开发后端。...2.安装cnpm 命令行输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 建议都用-g。...提一下,vue-cli  webpack 模板已经预先配置好(安装vue-cli时,已经自带安装webpack) 3.以上搭建完成后我们就可以构建并运行一个简单项目啦 image.png ?.../vuejs/vue-devtools.git  是clone到E:\DevelopTools\vue-devtools-master 2.vue-devtools-master目录下安装依赖包,...":false改成true 4.编译代码           npm run build 5.安装扩展Chrome插件 Chrome浏览器 >  更多程序 > 拓展程序  点击加载已解压程序按钮, 选择

2.3K20

vue devtools如何使用调试_千牛提示opendevtools

也是一知半解,具体看这里介绍吧) 理解: vue是响应式,即JavaScript代码变量值改变会反映到HTML元素,也就是说,实现了数据和视图(HTML元素)绑定。...所以,作为新手来说,不要着急学太多东西,先来体验一下vue魔力,然后再去学习其他安装方法。 复制粘贴下面的代码就能直接运行 <!...答:打开你浏览器 JavaScript 控制台 ,并修改 app.message 值,你将看到视图相应地更新。...然后通过Windows+R这个快捷键打开“运行”对话框,输入cmd,进入命令行。 命令行内,进入到vue-devtools-master目录下。...5.启动vue devtools插件 6.打开vue项目,控制台选择vue: 7.点击vue,查看数据 可能会遇到问题 1.命令行执行npm install时,会长时间停留在fetchMetadata

1.1K30

如何用Vue开发Electron桌面程序? 这篇就够了!

项目开发模式运行出现 Failed to fetch extension 警告 由于网络问题, 开发模式无法下载 vue devtool 导致警告, 需要在 background.js 中注释掉下载代码...项目使用本地vue devtools ① 首先可以将vue devtools代码clone下来, 然后进行编译 git clone https://github.com/vuejs/vue-devtools.git...cd vue-devtools npm install npm run build 然后把vue-devtools/packages/shell-chrome文件夹复制到项目根目录 ② background.js...打包问题 参考文档: https://www.electron.build/configuration/nsis 使用nsis打包windows程序安装包 vue.config.js 配置打包配置...打包配置文件(installer.nsh)添加配置 安装时候注册表注册URL protocol ?

5.3K63

Spring Boot + Vue 也可以开发 CS 架构应用,快来试试!

然后,使用 npm install 命令安装项目所需要依赖包,安装完成之后,可以使用 npm run dev 或 npm run build 命令运行 electron-vue 模版应用程序,运行效果如下图所示...代码 | | └── resources - 图标,平台相关文件等 | ├── renderer - 运行在渲染进程代码 | | ├── lib - 渲染进程初始化代码 JavaScript...【主进程】 Electron 运行 package.json main 脚本(background.js)进程被称为主进程。主进程运行脚本通过创建web页面来展示用户界面。...每个 Electron Web 页面运行在它自己渲染进程普通浏览器,Web 页面通常在一个沙盒环境运行,不被允许去接触原生资源。...每个渲染进程都是独立,它只关心它所运行 Web 页面。 src 目录结构 Electron 目录,src 会包包含 main 和 renderer 两个目录。

2K10

Vue.js入门手册整理

cnpm install vue vue-cli -g 运行vue 创建一个基于 webpack 模板新项目my-project: vue init webpack my-project 安装依赖 cd...my-project cnpm install 以默认端口来运行npm run dev 安装成功之后,访问: http://localhost:8080 ?...,也可以npm install 3.3、构建devtools npm run build 编译成功之后,就选择chrome添加拓展程序,选择开发者模式,选择vue-devtools\shells\chrome...文件夹,就可以将编译好chrome插件引到chrome里 比较顺利是直接安装就可以按F12调试了,如果有遇到下列问题,可以参考解决方法: 3.4、devtools常用问题 npm run build...修改配置,改为TRUE,使vue插件chrome里可以看到 修改:vue-devtools\shells\chrome\manifest.json ?

2.2K50

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

cnpm install vue vue-cli -g 运行vue 创建一个基于 webpack 模板新项目my-project: vue init webpack my-project 安装依赖 cd...my-project cnpm install 以默认端口来运行npm run dev 安装成功之后,访问: http://localhost:8080 第二章、目录结构 2.1、webpack...,也可以npm install 3.3、构建devtools npm run build 编译成功之后,就选择chrome添加拓展程序,选择开发者模式,选择vue-devtools\shells\chrome...文件夹,就可以将编译好chrome插件引到chrome里 比较顺利是直接安装就可以按F12调试了,如果有遇到下列问题,可以参考解决方法: 3.4、devtools常用问题 npm run build...修改配置,改为TRUE,使vue插件chrome里可以看到 修改:vue-devtools\shells\chrome\manifest.json 如果devtools插件还是不起效,可以vue-devtools

1.4K20

vue 开发常用工具及配置一

vue-cli 官网地址为:cli.vuejs.org/zh/。...使用命令安装: npm install -g @vue/cli # OR yarn global add @vue/cli 安装后检查版本: vue -V 最新版本 3 以上:3.3.0 安装 VUE...如上所示,创建过程,涉及到这些工程特性: Babel,必选,用于将编写ES6代码编译成浏览器能识别的JavaScript代码,是核心组件包 Typescript,微软开发JS强类型版本,通过Babel...小图片等 src,源码所在 babel.config.js,babel配置文件 package.json,顶重要webpack工程化配置文件 运行测试: npm run serve 运行效果: 3,...详细介绍见: https://zhuanlan.zhihu.com/p/39390139 4,后台接口反向代理 vue开发,前端界面和后台服务分离,为了便于调试,通常在本地环境设置反向代理,连接到后台接口服务

1.2K20

Spring Boot + Vue 如此强大?

然后,使用 npm install 命令安装项目所需要依赖包,安装完成之后,可以使用 npm run dev 或 npm run build 命令运行 electron-vue 模版应用程序,运行效果如下图所示...代码 | | └── resources - 图标,平台相关文件等 | ├── renderer - 运行在渲染进程代码 | | ├── lib - 渲染进程初始化代码 JavaScript...1、主进程 Electron 运行 package.json main 脚本(background.js)进程被称为主进程。主进程运行脚本通过创建web页面来展示用户界面。...每个 Electron Web 页面运行在它自己渲染进程普通浏览器,Web 页面通常在一个沙盒环境运行,不被允许去接触原生资源。...每个渲染进程都是独立,它只关心它所运行 Web 页面。 src 目录结构 Electron 目录,src 会包包含 main 和 renderer 两个目录。

16410

Vue-cli解析

步骤如下: 安装vue-cli 以webpack模版安装目录 这样之后,我们就可以使用IDE打开目录了。 此处注明vue-cli版本2.9.2,以免之后改版之后,误导读者。...index.js 这个文件,其实有十分充足代码注释,我们也可以来深入探究一下。 从代码,我们可以看到通过module.exports导出了一个对象,其中包含两个设置dev和build。...明白了这些字段意思之后,就可以之后开发,主动根据项目需求,改动目录内容。...用于返回脚手架错误函数 一共这么四个函数方法,utils中被定义到。 这个文件代码非常少,我们可以直接贴上代码,然后来分析,其中作用。...之后,设置环境参数,设置成生产环境,之后就是一系列打包流程。 总结 本篇文章,主要总结了一下vue-cli生成文件,其中一些配置参数和文件大致作用。有不到位地方,希望大家可以指正。

1.1K60

使用mpvue开发小程序教程(一)

我们可以通过安装node.js后里面包含npm工具来安装vue-cli命令行输入如下命令: npm install vue-cli -g 安装完成后,输入如下命令进行验证: vue // 成功的话会输出如下内容...Visual Studio Code(简称vscode)是现在非常流行一个轻量级代码编辑器,拥有非常多好用辅助开发插件,文章都会使用这个编辑器来编辑代码。...at http://mpvue.com 这个过程vue-cli主要是先从远程代码仓库中下载了一份注册名为mpvue/mpvue-quickstart模板代码,然后根据开发者命令行提示过程输入信息...这份代码暂时还运行不起来,因为它还缺少依赖库,我们需要执行以下命令进行依赖库安装: cd firstapp npm install 经过几分钟下载安装,依赖库安装到了firstapp目录下,你可以看到该目录下多出了一个...编译后代码会在dist目录下: ? 运行并查看结果 上面的步骤,我们开启开发模式后,其实并不能看到小程序执行效果,要真正看小程序运行界面的话,我们还是要借助微信开发者工具。

94450

Vue2全家桶之一:vue-cli

② 全局安装vue-clicmd输入命令: npm install --global vue-cli已经安装过,为了更直观电脑上重新演示下) 安装成功: 安装完成之后输入 vue...打开C:\Users\Andminster\AppData\Roaming\npm目录下可以看到: 打开node_modules也可以看到: 2.用vue-cli来构建项目 ① 首先在D盘新建一个文件夹.../ '),因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,本地是无法找到对应文件(服务器上没问题)。...可以看到dev设置,build/webpack.dev.conf.js,该文件是开发环境webpack配置入口。...项目开发完成之后,可以输入 npm run build 来进行打包工作。 npm run build 另: 1.npm 开启了npm run dev以后怎么退出或关闭? ctrl+c 2.

52641

Spring Boot + Vue 如此强大?

然后,使用 npm install 命令安装项目所需要依赖包,安装完成之后,可以使用 npm run dev 或 npm run build 命令运行 electron-vue 模版应用程序,运行效果如下图所示...代码 | | └── resources - 图标,平台相关文件等 | ├── renderer - 运行在渲染进程代码 | | ├── lib - 渲染进程初始化代码 JavaScript...1、主进程 Electron 运行 package.json main 脚本(background.js)进程被称为主进程。主进程运行脚本通过创建web页面来展示用户界面。...每个 Electron Web 页面运行在它自己渲染进程普通浏览器,Web 页面通常在一个沙盒环境运行,不被允许去接触原生资源。...每个渲染进程都是独立,它只关心它所运行 Web 页面。 src 目录结构 Electron 目录,src 会包包含 main 和 renderer 两个目录。

58520

竟可以开发基于 CS 架构应用

然后,使用 npm install 命令安装项目所需要依赖包,安装完成之后,可以使用 npm run dev 或 npm run build 命令运行 electron-vue 模版应用程序,运行效果如下图所示...代码 | | └── resources - 图标,平台相关文件等 | ├── renderer - 运行在渲染进程代码 | | ├── lib - 渲染进程初始化代码 JavaScript...1、主进程 Electron 运行 package.json main 脚本(background.js)进程被称为主进程。主进程运行脚本通过创建web页面来展示用户界面。...每个 Electron Web 页面运行在它自己渲染进程普通浏览器,Web 页面通常在一个沙盒环境运行,不被允许去接触原生资源。...每个渲染进程都是独立,它只关心它所运行 Web 页面。 src 目录结构 Electron 目录,src 会包包含 main 和 renderer 两个目录。

74320

跨年都在更新 vite 到底有多香?

看到了更新,还忍不住去官方文档一探究竟,跟着看了几天,就在差不多看完文档时候,GitHub 那边传来了噩耗,三天时间,提交了 10 个 beta,尤雨溪你简直就是个恶魔啊; 来吧,大家也感受一下尤大魔鬼更新速度..., JS 语言层面还是不够; 终于ES6,ECMA委员会推出了语言层面模块系统:ES Modules 规范; 目前编程实践,前端编程得益于构建工具发展,编码过程中使用 ES Modules...最后,谈一下实现 JS 模块化基础上发散。随着应用日益复杂,在前端应用开发过程不仅仅只有 JavaScript 代码需要模块化,HTML 和 CSS 这些资源文件也会面临需要被模块化问题。...; 综上所述,vite 构建项目与 vue-cli 构建项目主要在于开发模式下,区别还是比较大: 1:Vite 开发模式下不需要打包可以直接运行,使用是 ES6 模块化加载规则;Vue-CLI...clipboard1.png 通过 npm run dev 命令,启动开发服务器: clipboard2.png 查看运行结果: clipboard3.png 使用 npm run build 命令进行项目构建

3.5K50

vue-cli 4 快速构建一个 Vue 项目

Node 是一个让 JavaScript 运行在服务端开发平台,它让 JavaScript 成为与 PHP、Python、Perl、Ruby 等服务端语言平起平坐脚本语言。...Node 对一些特殊用例进行优化,提供替代 API,使得 V8 浏览器环境下运行得更好。V8 引擎执行 Javascript 速度非常快,性能非常好。...Node 是一个基于 Chrome JavaScript 运行时建立平台, 用于方便地搭建响应速度快、易于扩展网络应用。... grunt、glup、browserify 等已经相当火了之后,webpack 长江后浪推前浪,把前辈们拍死沙滩上,实力惊人。 ?...package-lock.json:是 npm install 时候生成一份文件,用于记录当前状态下实际安装各个npm package 具体来源和版本号   官方 vue-cli 3 以后,精简很多文件

59710

竟然可以开发基于 CS 架构应用

然后,使用npm install命令安装项目所需要依赖包,安装完成之后,可以使用npm run dev或npm run build命令运行electron-vue模版应用程序,运行效果如下图所示。...代码 | | └── resources - 图标,平台相关文件等 | ├── renderer - 运行在渲染进程代码 | | ├── lib - 渲染进程初始化代码 JavaScript...【主进程】 Electron 运行 package.json main 脚本(background.js)进程被称为主进程。主进程运行脚本通过创建web页面来展示用户界面。...每个 Electron Web 页面运行在它自己渲染进程普通浏览器,Web页面通常在一个沙盒环境运行,不被允许去接触原生资源。...# 运行开发模式 npm run dev # 打包安装文件 npm run build 部分运行效果如下图。

1.2K30

前端开发3年了,竟然不知道什么是 Vue 脚手架?(上)

-g //全局安装 安装完成之后,输入 vue 回车,就能看到 vue 命令行,如图: 官网文档介绍 vue-cli 安装时,可以使用命令有两种: yarn 工具,类似 npm 基本使用,...", "start": "npm run dev", "build": "node build/build.js" } 3.1、为什么使用 npm run dev 启动服务?...npm run build 运行时,其实执行是: "node build/build.js"。...node:node 为 js 执行提供了环境,node 是 C++ 开发 V8引擎,可以直接把 js 文件运行成二进制代码,所以运行起来很快。...node 执行 js 时候,直接使用:node xx.js 文件就可以运行了。 所以打包项目的时候,执行build 文件夹内 build.js 文件。

65530

Vue:npm run serve 到底做了什么?

前言 vue-cli2或者 vue-cli3 ,当我们创建好一个项目,我们要通过 npm run dev(vue-cli2命令,vue-cli3之后npm run serve,原理都一样,只不过是换了一下名字而已...好,先来创建一个vue项目,命令行输入命令:vue create test-vue vue-cli版本是4.4.6,所以要通过这行命令创建。其它版本可以查一下官方文档。这里不过多解释。...这背后到底是做了什么 我们命令行输入命令: npm run serve 看一下运行成功之后提示信息: 有没有小伙伴想过这样问题:为什么运行npm run serve命令呢,这些命令在哪里呢...其实这个命令不需要记这个命令,我们只要记住 npm run就好,当我们创建完项目之后可以看到一个 package.json文件。...总结: 当我们命令行输入 npm run xxxx时候,其实就是执行 package.json文件里 scripts里某个命令 npm run serve命令之后,就是开启了一个服务来运行我们项目

2.4K20

Vuejs学习笔记-vue-cli

前言 这篇使用vue构建工具vue-cli创建vue项目的本应该是基础篇发完之后,无奈基础篇有点久了,先把今天学记录下。 本系列中所有npm由于众所周知原因,均可替换为cnpm。...vue-cli 1、全局安装 vue-cli npm install --global vue-cli 亦可简写为: npm install -g vue-cli 2、创建一个基于 webpack 模板新项目...(Y/n) 是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格,并不会影响整体运行,这也是为了多人协作。作为新手,由于不了解,这里就不用了。...#运行 npm run dev 一切顺利的话,等段时间就会自动默认浏览器打开类似http://localhost:8080/#/页面。...附录 安装生产环境依赖环境 npm install --production 可用于npm install之后,用于安装在生产环境依赖环境。

1.3K10

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券