如何打包及运行打包后的前端项目

最新推荐文章于 2024-09-21 14:00:00 发布
最新推荐文章于 2024-09-21 14:00:00 发布
阅读量3.8k 收藏 13
点赞数 4
文章标签： 前端 javascript npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Crayon111/article/details/126096251
版权
本文介绍了使用Visual Studio Code管理和打包项目，通过npm搭建Express应用，从安装express-generator到部署dist文件并启动本地服务器的过程。步骤包括：安装、文件组织、依赖管理与启动，适合初学者快速上手。
摘要由CSDN通过智能技术生成

  • 打包项目
    vscode可以选择直接点击运行build
    或通过cmd 进入到项目文件运行 npm build
    在这里插入图片描述
    打包后项目内会多出一个dist文件夹
    在这里插入图片描述
    在这里插入图片描述

  • 运行项目

安装 express-generator
npm install express-generator -g

安装成功后新建express文件
express expressDemo

进入expressDemo文件安装依赖
npm install

将dist文件夹内的所有文件复制粘贴到
expressDemo/public文件下（如图下
在这里插入图片描述
启动项目
npm start

在浏览器上打开localhost:3000进入页面
在这里插入图片描述

CrayonJ
关注
前端：React/Vue项目打包后的代码不部署，怎么在本地运行？
weixin_46721670的博客
10-11 1331
前端：React/Vue项目打包后的代码不部署，怎么在本地运行？
前端打包好后运行
罗彬桦的博客
08-20 1247
可以在打包好的dist下面运行如下命令： 下载http-server npm install http-server -g 开启 http-server服务 终端进入目标文件夹，然后在终端输入： $ http-server -c-1 （⚠️只输入http-server的话，更新了代码后，页面不会同步更新） Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192....
前端项目打包部署
最新发布
cyt涛的博客
09-21 1210
项目打包: 使用将项目转换为可供生产环境使用的静态文件，输出到dist目录。上传文件:将本地打包生成的 dist 目录下的文件拷贝到服务器的目录。Nginx 配置: 配置 Nginx，设置静态文件路径以及反向代理，解决跨域问题。访问项目: 通过服务器 IP 或域名访问项目。
vscode打包代码
weixin_58431406的博客
06-02 4243
npm run build:prod
前端本地打包，启用服务运行
weixin_58572700的博客
01-27 619
我们在vsCode，应用商店搜索 “Live Server (Five Server)”第一个就是，安装完。
如何在VSCode中打包Vue项目？
我的博客
11-29 6384
使用VSCode作为Vue项目的开发环境后，我们需要了解如何打包Vue项目。本文将从多个方面对如何在VSCode中打包Vue项目进行详细阐述。
基于浏览器的完全打包环境，没有 Nodejs 也照样打包前端项目.zip
05-26
然而，"基于浏览器的完全打包环境，没有 Nodejs 也照样打包前端项目.zip" 提供了一种创新的解决方案，它允许开发者在没有安装Node.js的情况下进行前端项目的打包。 这个项目的核心是Rollup，一个流行的JavaScript...
vue大型项目之分模块运行/打包的实现
10-14
主要介绍了vue大型项目之分模块运行/打包的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
10-16
webpack打包vue项目之后生成的...通过以上步骤和知识点的说明，我们可以了解到webpack打包Vue项目的`dist`文件后如何通过Express服务器进行部署和运行。这对于Vue和Node.js结合的全栈开发来说是十分基础且重要的操作。
使用webpack打包后的vue项目如何正确运行（express）
10-17
总结来说，将 Vue 项目与 Express 结合，可以方便地部署和运行打包后的应用。这得益于 Express 对静态资源的友好支持，使得 Vue 项目可以通过简单的配置就能在 Node.js 服务器上顺利运行。希望这篇指南能帮助到你，...
vs code 前端开发工具
02-10
前端开发工具，
VSCode部署前端代码程序包到本地运行
2401_84827689的博客
06-05 652
2.在这时可能会遇到报错，报错的解决方法如下,在windows自带的搜索框中搜索Windows PowerShell,以管理员身份运行。8.如果前面的都没问题，那要检查config.js文件的Url,询问后端人员网址有没有错误，如有更新就要更改保存后再执行上面第6步。3.在命令行窗口中输入set-ExecutionPolicy RemoteSigned,按回车，改变执行策略，输入Y。1.在终端打开该项目，输入npm install -g yarn,按回车。7.跑完代码后会弹出对应的网址，点击进入即可。
前端开发者运行打包后的前端项目的两种方法
个人博客
02-18 5153
两种方法运行打包后的前端项目
关于在vscode中使用npm对前端项目的打包处理问题
var_let_const的博客
06-10 2549
在vscode中，添加npm脚本扩展；其中有package.json里的build打包快捷键，点击后会生成一个dist文件，这个文件就是打包后的文件 或者配置过npm后，找到项目suo'z
在使用vscode打包前端项目时，npm run build报错
susu1083018911的博客
11-16 2679
不太熟悉前端项目，在vscode中执行 npm build的时候报错，报错信息如下： 我们打开项目根目录下的package.json文件，可以看到build后面跟了：prod 那么我们执行的命令需要修改为： npm run build:prod 如果上图中build后面没有带prod我们的打包命令还是： npm run build ...
vscode开发工具react前端的打包--发布nginx镜像
shi__lin的专栏
12-25 1126
vscode开发工具react前端的打包–发布nginx镜像 ##vscode打包react前端 使用npm进行打包。 npm install 安装相关的一用 umi builder 打包命令 打包后的文件，放置在 disk文件夹中 编写Dockerfile文件 FROM nginx ADD nginx.conf /etc/nginx/conf.d/default.conf COPY dist /usr/share/nginx/html WORKDIR /usr/share/nginx/html/
Javaweb之前端工程打包部署的详细解析
qq_69748833的博客
12-05 496
nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。niginx在windows中的安装是比较方便的，直接解压即可。所以我们直接将资料中的nginx-1.22.0.zip压缩文件拷贝到无中文的目录下很明显，我们如果要发布，直接将资源放入到html目录中。
使用vscode进行vue.js基础项目搭建和打包
Jxq_IT的博客
06-12 8233
使用vscode进行vue.js项目搭建 一、vue.js环境安装 　因为vue.js运行在node.js的npm环境下,所以必须先安装node.js。 　1、nodejs安装请参照Node.js 安装配置。 在运行中输入cmd中查看nodejs安装版本： 备注：安装方式不只这一种：也可使用淘宝的npm镜像：npm install -g cnpm --re...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值