【node】启动本地打包文件的方式

已于 2024-06-20 11:32:23 修改
阅读量454 收藏 3
点赞数 4
分类专栏： ndoe专栏 文章标签： node vue.js 前端
于 2024-06-20 11:19:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45291798/article/details/139814739
版权

前言
…
目标

1 初始化node文件
2 将打包文件通过node发布到本地
3

系列文件
【node】创建本地接口

一 node方式

1 在新建一个空的文件夹node

进入空文件夹在，文件夹的地址栏输入cmd回车，会自动跳转到命令行工具里
在这里插入图片描述

2 配置初始化文件

在命令行输入命令npm init，生成package.json文件

npm init
在这里插入图片描述

在node文件夹下看到package.json文件，配置文件创建成功

3 安装express

node开发接口，我们需要借助node的插件
Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用。Express 不对 node.js 已有的特性进行二次抽象，我们只是在它之上扩展了Web应用所需的功能。丰

最低0.47元/天 解锁文章
爱编程的小学究
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
本地起一个node服务
卡卡罗特的博客
01-25 4243
有时候我们写的前端应用或者页面需要在本地起个服务，比如做移动端，想看看手机上的效果，用手机访问本地地址。 1.首先下载安装node.js、npm 2.新建node项目文件夹 比如：nodehost; 在当前文件夹打开终端，npm init 初始化， npm install express --save 安装express 3.在nodehost根目录新建一个app.js; 起服务地址默认12...
用于文件打包后,启动的本地服务
09-02
解压后，用户可能需要运行特定的启动脚本来启动本地服务，比如在命令行中输入“python main.py”或者“npm start”。 总结起来，这个场景涉及了以下IT知识点： 1. 文件打包：将源代码和资源文件打包成可执行或可...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
Webpack 是一款强大的模块打包...总之，Webpack 打包 Vue 项目后生成的 `dist` 文件需要部署到服务器才能正确运行，通过结合 Express.js 可以快速搭建一个简单的服务器环境，实现打包后 Vue 项目的本地预览或线上部署。
将H5网页项目使用node打包成运行文件 运行在windows后台服务中，一键启动客户端应用
06-14
在的项目需求是把网页项目交付给用户 因为是个离线项目所以使用的是本地离线服务 之前的方案是通过终端运行node 启动服务 可是不能让用户每次都启动node服务来启动项目 所以就有现在的方案 通过脚本来运行项目 到...
Vue-cli打包后如何本地查看的操作
10-14
然而，为了在本地环境中预览打包后的应用，我们需要模拟一个 HTTP 服务器环境，因为现代浏览器出于安全考虑，不允许直接从文件系统加载 JavaScript、CSS 等资源。 **Vue CLI 打包流程** 1. 在终端中进入你的 Vue.js...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 332
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
vue3 学习笔记17 -- 基于el-menu封装菜单
最新发布
weixin_46328739的博客
07-23 120
前提条件：组件创建完成。
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
从业计算机毕业设计10年，打算用一年时间分享10年毕设经验！
07-23 325
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
vue图片存放在public目录和src/assets目录下的区别
Zing_ing的博客
07-19 609
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
(vue3)el-table滚到底部加载数据el-table-infinite-scroll
weixin_63442947的博客
07-19 235
el-table实现。
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 115
Python Formulas库，JSON格式导出导入。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 922
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 77
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
vue this.$refs 动态拼接
cimbala的博客
07-19 246
业务需要，refs是不固定的。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 65
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
vue 腾讯云 javascript sdk + 简单富文本组件设计+实战
呵呵哒!的博客
07-19 260
【代码】vue 腾讯云 javascript sdk + 简单富文本组件设计+实战。
VUE中的重点*
qq_61132537的博客
07-22 750
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
webpack打包vue项目之后生成的dist文件本地运行
09-02
在使用webpack打包vue项目后生成的dist文件，我们可以通过以下步骤在本地运行： 1. 首先，我们需要将dist文件夹复制到我们项目的根目录下。假设我们的项目名为"my-project"，现在我们的项目目录结构如下： ``` my-project ├── src │ ├── components │ ├── views │ └── ... ├── dist ├── ... ├── package.json └── ... ``` 2. 然后，我们需要安装一个本地服务器，以便在本地运行我们的打包后的项目。我们可以通过使用Node.js的http-server模块来实现。在终端中，进入我们的项目根目录，并运行以下命令来安装http-server： ``` npm install http-server --save-dev ``` 3. 安装完http-server后，我们可以在package.json文件中的"scripts"字段下添加一个启动脚本。在"scripts"字段下添加以下内容： ``` "scripts": { "serve": "http-server dist" } ``` 4. 然后，在终端中运行以下命令来启动我们的本地服务器： ``` npm run serve ``` 这将会在本地启动一个服务器，并将"./dist"目录设置为默认的静态文件目录。我们可以通过访问"http://localhost:8080"来预览打包后的项目。 通过以上步骤，我们成功在本地运行了通过webpack打包后生成的dist文件。您可以在本地进行调试和预览，以确保打包后的项目正常运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱编程的小学究

愿你有所收获

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值