【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...
Node 本地运行 Vue 打包项目
qq_34494140的博客
04-25 730
express 启动服务 const express = require("express") const app = express() const host = '127.0.0.1' const port = 8105 // 静态文件路径 app.use(express.static("./dist")) // 启动服务监听端口 app.listen(port, function (err) { if (err) { console.log(err) } else { con
node 运行打包后的dist文件
qq_45641978的博客
10-27 5063
运行dist文件很简单 1.根目录创建一个server.js文件 如果本地没有安装express，安装一下 npm i express 将下列代码cv const express = require('express') const app = express() const port = 8012 // 自定义端口号（不要与已存在端口冲突） app.use(express.static('dist')) // dist 是项目的打包资源路径，一般为根目录下dist app.listen(port, ()
vue打包后dist文件如何在本地启动
shmilywx的博客
01-25 1031
然后打开浏览器访问就可以了，如图是启动成功。1.首先全局安装http-server。
node+express启动vue打包后的dist文件
yaorui_123456的博客
08-27 4060
启动vue打包后的dist文件 当我们前端使用vue框架打包成dist文件时,想预览测试时,又不想上传服务器,可以在本地创建node服务器,使用非常简单. 一、创建一个文件夹（英文名称） 小编创建的是server-app cd server-app npm init 二、使用express模块 这一步需要下载一个node_modules包 npm install express 三、手动创建app.js入口文件 小编创建的是app.js,随便啊!!! //使用express构建web服务器 --11:2
node打包单体文件部署服务器
weixin_58775072的博客
09-18 4960
node打包的问题
nodejs服务本地预览打包后的vue文件
Cynthia_Yue27的博客
09-09 911
node起本地服务，预览vue打包后文件，解决跨域问题
nuxt原生node命令启动&打包
hoyche的博客
04-06 835
nuxt命令行的真实执行文件是./node_modules/nuxt/bin/nuxt.js，当我们用nuxt快捷命令启动时，nuxt其实是拿到第二个参数并且与nuxt拼接而来的命令执行 指令 描述 拼接命令 nuxt 开启一个监听3000端口的服务器，同时提供hot-reloading功能 没有第二个参数，实际nuxt会添加默认参数dev，实际执行命令是nuxt-dev nuxt build 构建整个应用，压缩合并JS和CSS文件（用于生产环境） nuxt-s
vue本地打包文件 运行 liveServer
qq_38935512的博客
12-15 1506
live-server 是一款 npm 工具，全局安装 npm i -g live-server 后，项目目录使用 live-server 命令行命令便可直接在浏览器中预览（默认找 index.html，其他需要带上文件名空格后跟在后面），并且自动全局监听实时更新。关于live-server配置 可以在setting.json 中去配置 可以百度一下它的属性。
用于文件打包后,启动的本地服务
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 323
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 756
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
(vue3)el-table滚到底部加载数据el-table-infinite-scroll
weixin_63442947的博客
07-19 230
el-table实现。
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、付费专栏及课程。

余额充值