使用 npm run bulid 打包后，如何运行在本地查看效果:

最新推荐文章于 2024-04-26 17:20:07 发布
最新推荐文章于 2024-04-26 17:20:07 发布
阅读量1.2k 收藏 5
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue2.x ，vue_cli node，express，npm 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44722915/article/details/106037618
  • 问题描述: 

最近，使用 vue-cli 脚手架写前端项目，之前一直是使用 npm run dev 在8080端口上进行本地调试，没有问题是可以查看到具体的运行效果的。当使用 npm run build 进行上线打包，一开始是毫无头绪，什么都不懂，直接是就在命令行上敲下：npm run build 命令，结果就出现了问题。

  • 直接运行 npm run build 命令：

编译没有出现任何的问题，也没有报错；之后在浏览器中运行生成的 dist 目录下的 index.html，出现了一片空白，打开控制台之后，出现了好多的报错。

  • 刚开始运行 npm run bulid 命令时，有一段提示:
Tip : built files are meant to be s
了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue项目 npm run build 打包静态项目问题，一步到位的操作
Jacy_Lee_LDF的博客
08-14 2590
这次是第一次做vue项目，什么都不懂，过程中也遇到很多问题，每一次解决了就习惯性的写篇文章记录下来，以免下次再遇到，这次项目终于写完了，要打包上线，发现直接npm run build 打包之后，index.html 页面打开空白，检查发现引用的文件都报错了，百度方法，不报错了，但是index依然空白，还有项目打包时报错的问题，经过几十个标签页的学习，我觉得干脆改打包之前该修改的内容已经该添加的内容都操作一遍好了，省心！以下是具体操作： 1.首先修改 config/index.js ： productio.
56 如何调试 npm run build 的代码/如何在测试环境,预发布环境进行调试
970655147的专栏
04-01 1470
从下面可以看到 浏览器解析了很多个 HelloWorld.vue 着多个对应的就是之前 “npm run serve” 中生成的那一套七八个 js 文件, 一个组合文件, 三个代理文件, 三个真实的 html, js, css 文件。更新 devtool 的配置为 source-map, 然后进行 编译, 编译的结果如下, 可以看到一个 js 文件对应了一个 js.map 文件, 这个文件就是 source-map 文件。以当前目录为基目录, chrome 去寻找 js, css 等等, 可以正常找到。
【webpack 插件开发】如何调试 webpack 打包时候的代码？
wangs0622的博客
11-21 1227
介绍 在进行前端工程的开发时，一般情况需要使用 webpack 打包工程。本文简单记录一下如果调试 webpack 打包时候的代码，免得下次还需要再去搜索。 方法1 使用 vscode + npm 插件 在 vscode 中安装插件 egamma/npm 插件。该插件可以帮我们界面直接点击去运行 package.json 文件中 scripts 下面定义的脚本命令。安装完成之后，在 Explorer 界面中会出现 NPM SCRIPTS 的面板，其中就会解析 package.json 中定义的命令，这样只需
npm run build 打包后，如何运行在本地查看效果（Apache服务）
CWW2016的博客
09-05 5673
目前，使用vue-cli脚手架写了一个前端项目，之前一直是使用npm run dev 在8080端口上进行本地调试。项目已经进行一半了，今天有时间突然想使用npm run build进行上线打包，试试能否成功看到我的项目效果。一开始是毫无头绪，什么都不懂，直接是就在命令行上敲下：npm run build命令。 好开心啊，竟然没有报错。以为就这么简单的成功了，在浏览器上输入：htt...
NPM 组件你应该知道的事
weixin_46961967的博客
09-24 419
开发一个 npm 组件， 你是否了解需要对外导出什么格式的代码？如何让 npm 组件体积尽可能小？整篇文章按照如下目录进行讲解：为何需要打包组件打包输出格式如何打包 esm 模式代码（感...
react项目npm run build打包后怎么运行
lijunfeng513的专栏
04-02 3037
live-server插件可以简单创建一个本地服务，执行以下命令全局安装live-server插件。打包成功后文件夹中会多出一个 build 文件，该文件就是打包好的项目！打开浏览器，输入localhost:8080 就可以预览了。后面需要把build的项目配置到apache服务器。安装完成就可以在终端启动打包好的build项目了。1、首先我们全局安装live-server插件。方式一：使用live-server插件。2、在build文件夹终端输入。此时，打开浏览器地址栏输入 “一、react项目的打包。
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
10-17
在生产环境下，我们通常会使用npm run build命令进行代码的打包，以优化性能、压缩文件等。然而，在完成打包后，经常遇到在本地无法打开打包后的应用文件的问题。这通常是因为Vue-cli默认设置的静态文件服务路径问题...
npm run build 打包这些玩意
01-08
安装插件后，配置并运行 `npm run build`，可以查看打包后的效果，确认文件是否成功压缩。 5. **引入顺序**： - 除了 Element-UI 示例，其他第三方库和自定义样式的引入顺序也应引起注意。通常，基础样式和全局...
vue中Npm run build 根据环境传递参数方法来打包不同域名
12-12
使用 npm run build -- xxx ，根据传递参数xxx来判定不同的环境，给出不同的域名配置。 1.项目中/config/dev.env.js修改： 新增：HOST: ‘”dev”‘ 'use strict' const merge = require('webpack-merge') const ...
解决vue项目,npm run build后,报路径错的问题
10-14
在Vue项目中，`npm run build` 是用来执行生产环境构建的命令，它将优化代码并准备部署到服务器。然而，有时在执行此命令后，可能会遇到路径错误的问题，导致资源无法正确加载。本文将详细解析如何解决这个问题，并...
使用webpack打包后的vue项目如何正确运行（express）
10-17
主要介绍了使用webpack打包后的vue项目如何正确运行（express） ,接下来通过本文给大家详细介绍，需要的朋友可以参考下
npm run build 打包 之后怎么用_一个npm包的自述
weixin_39786617的博客
11-27 991
自我介绍我叫 react-jinke-music-player, 是一个 npm 包, 叫我 jk 就好. 我名下有三套房产, 一套是 github, 一套是 npm, 还有一套是 packages, 但买来就没住进去过, 没办法, 谁叫我这么有钱呢! 平时请了个管家 microsoft 帮我打理, 自己平时很少过问.README为了防止老年痴呆, 我给自己写了个使用说明书, 叫 README.m...
http://www.dabaipm.cn/static/frontend/346.html
oYuLian的博客
05-10 799
vue-cli构建项目 npm run build后应该怎么运行在本地查看效果 2017-03-21 本文以vue官方脚手架vue-cli构建的项目为例。 问题来啦 运行npm run dev以开发模式打开调试好了你的案例程序；你还不满足于仅仅把代码放在github上，想直接能把案例效果build版本的代码在本地预览或者放在你的个人博客上供大家直接看效果学习。 这时如果直接运行n
在react项目中 通过npm run build 打包后怎么运行浏览
Carrycjava的博客
10-10 3962
然后，打开浏览器地址栏输入“http://localhost”，可以看到“it works”内容页面。即可访问网页，默认监听的是8080端口号，打开浏览器输入 localhost:8080。打包完成后，文件夹中会出现一个build文件，此文件为打包好的项目文件。最后，需要把打包好的项目文件配置到 apache服务器则可以访问。方法二：使用Mac电脑自带的 apache服务器。2、终端进入build文件目录下输入。1、先在终端的全局安装此插件依赖。如何运行打包后的项目？1、输入命令进入此服务。
vue项目npm run build 打包之后如何在本地访问
骨子里的偏爱
04-26 2350
vue项目npm run build 打包之后如何在本地访问
npm run build 打包后，如何运行在本地查看效果（Nginx服务）
CWW2016的博客
11-21 618
这段时间，研究了一下vue 打包的很慢的问题。但是当我 npm run build 打包后，在本地查看效果的时候，活生生被我老大鄙视了，因为我打开了XAMPP。他说：你怎么不用Nginx啊？用这个一堆的路径问题！！！！！！ 然后我就去研究了Nginx 。。。我原谅我老大了。 一.初识nginx Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMA...
如何在本地运行npm run build 打包之后的代码
weixin_42333548的博客
12-23 6152
使用基于 Node.js 平台，快速、开放、极简的 Web 开发框架Express 1、按照express创建出基本的结构 mkdir myapp cd myapp npm init package.json会被创建出来 2、安装express npm install express --save 会创建 node_modules 3、同级目录下创建index.js文件和www...
vue-cli构建项目 npm run build后应该怎么运行在本地查看效果
weixin_33800463的博客
05-04 892
2019独角兽企业重金招聘Python工程师标准>>> ...
使用npm run build，npm run make 打包后怎么运行生成的yaml文件
最新发布
03-26
<think>好的，我现在需要帮助用户解决如何执行通过npm run build和npm run make生成的YAML文件的问题。首先，我需要确认用户提到的这两个命令的具体作用，以及生成的YAML文件可能是什么用途。 用户提到了npm run build和npm run make，这两个命令通常与前端构建工具或CLI工具相关。比如，可能是在使用Electron Forge、Vite或其他构建工具时，这些命令会生成配置文件或构建产物。但YAML文件本身不是可执行文件，所以需要进一步分析。 首先，npm run build通常是用来构建项目的，比如将源代码编译成静态文件，生成dist目录。而npm run make可能用于生成安装包或特定平台的执行文件，比如Electron应用打包时会生成YAML配置，用于后续的构建流程。例如，Electron Forge的配置文件中可能包含如何打包应用的信息，但用户可能误解了生成的YAML文件的作用。 接下来，我需要考虑用户可能使用的工具。比如，Electron Forge会在项目中使用make脚本生成安装程序，这时候生成的YAML可能是一个配置文件，而不是直接执行的。或者，用户可能使用了某些CLI工具，比如通过npm scripts调用其他工具生成YAML文件，而这些YAML可能是Kubernetes的部署文件，需要用到kubectl apply -f命令来应用。 不过，用户的问题是如何“执行”YAML文件，而YAML通常是配置文件，不是可执行脚本。可能的场景包括： 1. Kubernetes部署：用户可能在使用类似于kubectl apply -f file.yaml的命令来部署应用到集群。 2. Docker Compose：使用docker-compose -f file.yaml up来启动服务。 3. 某些框架或工具需要读取YAML配置来执行任务，比如CI/CD的配置文件（如GitHub Actions的workflow文件）。 但用户提到的npm run build和npm run make可能意味着他们是在构建一个前端或Node.js项目，生成的YAML可能不是用于直接执行，而是作为构建过程的一部分。比如，Electron Forge的配置文件中可能有生成安装包的指令，但实际执行的是通过electron-forge make命令，而不是直接运行YAML。 可能的误区是用户认为生成的YAML文件本身需要被执行，但实际上可能需要通过其他工具来使用这些配置文件。例如，生成的YAML可能是用于配置构建步骤，或者作为部署描述文件。 我需要进一步验证这些可能性。比如，检查Electron Forge的文档，确认make命令是否会生成YAML文件，并了解其用途。另外，考虑用户是否在使用其他工具如Vite、Webpack插件，或是某些脚手架工具，这些工具可能在构建过程中生成YAML文件用于其他目的。 假设用户确实在使用Electron Forge，那么生成的YAML可能位于.config/forge.config.yaml或其他位置，但该文件是配置而非可执行文件。用户可能需要运行npm run make来触发构建过程，该过程会根据YAML配置生成安装包，而无需直接执行YAML文件。 另一种情况是用户可能混淆了文件类型，比如生成的实际上是可执行脚本或某种需要解析的文件，但扩展名误用了YAML。这时需要检查文件内容，确定其实际用途。 总结，用户可能需要的是如何应用生成的YAML配置文件，而不是直接执行它。因此，正确的步骤应包括： 1. 确认生成YAML的工具和用途。 2. 根据工具文档，指导用户如何正确使用这些YAML文件，比如通过CLI命令加载配置。 3. 提醒用户YAML文件通常不是可执行文件，而是配置信息。 此外，需要检查用户提供的引用内容，引用[1]和[2]是关于npm初始化和镜像切换的信息，可能与当前问题关联不大，但可能暗示用户在使用npm scripts管理项目，需结合npm生态系统的常见实践进行解答。 最终，我需要给出具体步骤，帮助用户识别YAML文件的来源和用途，并提供相应的执行或应用方法，例如通过kubectl、docker-compose或其他工具命令来使用这些YAML文件。同时，可能建议用户查阅相关工具的文档以确认正确的使用方式。</think>### 如何执行通过 `npm run build` 和 `npm run make` 生成的 YAML 文件？ #### 1. 确认 YAML 文件的来源和用途 - **构建工具分析**：`npm run build` 通常用于编译项目（如生成静态文件到 `dist/` 目录），而 `npm run make` 可能关联到特定框架（如 Electron Forge 或 CLI 工具）生成安装包或配置文件。 - **YAML 文件的作用**： - 如果项目涉及 **容器化部署**（如 Docker/Kubernetes），YAML 可能是容器编排配置文件（如 `docker-compose.yml` 或 Kubernetes 的部署描述文件）。 - 若使用 **Electron Forge**，`make` 脚本会生成构建配置（如 `.config/forge.config.yaml`），但此文件是配置而非可执行文件[^1]。 - 其他可能性：CI/CD 配置文件（如 GitHub Actions 的 `.yml` 工作流）或框架的元数据。 #### 2. 根据用途执行 YAML 文件 ##### 场景 1：容器化部署（Docker/Kubernetes） - **Docker Compose**： ```bash docker-compose -f your-file.yaml up ``` - **Kubernetes**： ```bash kubectl apply -f your-file.yaml ``` ##### 场景 2：Electron 应用构建配置 - Electron Forge 的 YAML 文件用于定义构建规则，直接执行 `npm run make` 即可触发构建流程，无需手动操作 YAML 文件： ```bash npm run make ``` ##### 场景 3：CI/CD 或其他工具配置 - 若 YAML 是 GitHub Actions 的配置文件（如 `.github/workflows/deploy.yml`），提交到仓库后会自动触发流程，无需手动执行。 #### 3. 常见误区与验证 - **文件内容检查**：用文本编辑器打开 YAML 文件，观察其结构和关键词（如 `apiVersion`、`services`），判断用途。 - **工具文档参考**：查阅项目依赖的工具文档（如 Electron Forge、Vite），确认生成文件的预期使用方式。 - **错误处理**：若直接运行 YAML 文件报错（如 `Permission denied`），说明它并非可执行脚本，需通过其他工具解析。 #### 4. 示例流程（以 Kubernetes 部署为例） 1. 构建项目： ```bash npm run build ``` 2. 生成部署配置（假设生成 `deployment.yaml`）： ```bash npm run make ``` 3. 应用 YAML 到集群： ```bash kubectl apply -f deployment.yaml ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值