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

最新推荐文章于 2024-05-29 18:42:23 发布
最新推荐文章于 2024-05-29 18:42:23 发布
阅读量3.6k 收藏 11
点赞数 3
文章标签： 前端 javascript npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Crayon111/article/details/126096251
版权

  • 打包项目
    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
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VS-Code:前端工程化的开发过程
m0_73966560的博客
07-10 390
在components文件夹下， 第一个字母大写.vue。
使用 vscode 完成 webpack 操作。项目完成后使用 webpack 打包
eeeee1o的博客
03-15 1164
可能因为没有安装某些 loader 报错，通过 npm install ***，来安装对应的 loader 文件。例如 "scripts" 中原本就有 "build"， 此时，如果你添加了一个重复的。这是一个最简单的 Webpack 配置文件，它定义了入口文件。文件中，你需要将这个新添加的打包脚本命令改为不同的名称。文件就会被加载并运行，你的应用程序也会随之启动。打包生成的文件在 webpack 配置中设置的。来运行新添加的webpack打包脚本。5. 如果你想在浏览器中运行打包好的。字段中，键不能重复。
vscode打包代码
weixin_58431406的博客
06-02 4039
npm run build:prod
前端项目打包并部署
最新发布
djemx2025的博客
05-29 768
作者：https://juejin.cn/post/7326759323064008739。2、新建一个项目(miaoTestProject)，将dist目录放到里面。启动项目时，给启动的项目加一个别名(miaojiang)在当前项目路径下，生成 一个dist文件夹。3、在当前项目路径下，初始化包管理文件。将来部署项目，是部署的dist这个文件。选中项目，点击任务，点击build。在项目下，创建app.js文件。关掉cmd链接后，项目就停止了。在当前项目路径下，执行命令。根据项目的id,来停止项目。
VSCode项目打包详细步骤
weixin_45561430的博客
02-14 7823
C++项目打包详细步骤
如何在VSCode中打包Vue项目？
我的博客
11-29 5249
使用VSCode作为Vue项目的开发环境后，我们需要了解如何打包Vue项目。本文将从多个方面对如何在VSCode中打包Vue项目进行详细阐述。
vscode中启动、打包vue项目便捷方式（launch.json）
一天一点进步
04-03 2868
/ 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?比如你的项目启动命令为npm run server ，那么 "command": "npm run server",可以直接把这个文件copy到本地的项目中，configurations中的command是你执行操作输入的命令行。// 使用 IntelliSense 了解相关属性。"name": "启动服务","name": "打包项目",// 悬停以查看现有属性的描述。
vscode使用webpack打包
weixin_46087854的博客
08-14 2453
webpack打包
vue大型项目之分模块运行/打包的实现
10-14
主要介绍了vue大型项目之分模块运行/打包的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用webpack打包后的vue项目如何正确运行（express）
10-17
总结来说，将 Vue 项目与 Express 结合，可以方便地部署和运行打包后的应用。这得益于 Express 对静态资源的友好支持，使得 Vue 项目可以通过简单的配置就能在 Node.js 服务器上顺利运行。希望这篇指南能帮助到你，...
基于浏览器的完全打包环境，没有 Nodejs 也照样打包前端项目.zip
05-26
然而，"基于浏览器的完全打包环境，没有 Nodejs 也照样打包前端项目.zip" 提供了一种创新的解决方案，它允许开发者在没有安装Node.js的情况下进行前端项目的打包。 这个项目的核心是Rollup，一个流行的JavaScript...
项目打包运行dist以及nginx配置
04-11
对于前端项目，如React、Vue或Angular等现代JavaScript框架，"dist"目录是常见的打包输出目标。这个目录包含了优化过的静态资源，例如HTML、CSS和JavaScript文件，它们是为生产环境准备的，可以直接被浏览器解析和...
vue打包后显示空白正确处理方法
08-28
总的来说，解决 Vue 打包后显示空白页的问题需要细心排查，从项目配置到浏览器端的错误信息，每一步都可能成为关键。记住，每个项目的具体情况可能会有所不同，所以不要怕花时间去分析和调试。同时，保持项目结构...
前端如何将项目打包部署到服务器
z020729的博客
08-19 1716
本篇文章从前端项目打包开始，逐步完成项目部署到服务器的操作，这次采取的部署方案是通过vscode中Remote-SSH和SFTP两个插件实现项目部署到服务器，并在服务器上通过nginx代理将请求转发到对应的端口。
使用 Visual Studio Code 将 vue 项目 打包
YHLSunshine的博客
12-29 2680
使用 Visual Studio Code 将 vue 项目 打包
vscode开发工具react前端的打包--发布nginx镜像
shi__lin的专栏
12-25 1081
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/
Microsoft Visual Studio 2022 项目打包详细步骤（初学者必会）
热门推荐
weixin_48561041的博客
04-10 2万+
步骤1：在线载安装Setup project 双击下载，然后关闭vs，自动安装，安装完成后提示。VSIX Installer修改安装完成后，关闭vscode,再次打开vscode。 步骤2：打开你想要打包的项目，点解决方案右击，添加新建项目。 ...
IDEA进行JavaWeb项目打包操作
qq_34583944的博客
09-15 1073
IntelliJ IDEA 进行Maven项目构建打包
负责前端项目测试、打包及发布
06-06
前端项目测试、打包及发布是前端工程师的重要工作之一。具体的工作内容如下： 1.测试：前端工程师需要对前端项目进行测试，包括功能测试、性能测试、兼容性测试等。其中，功能测试是测试项目的各项功能是否正常运行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值