使用 npm 打包项目

最新推荐文章于 2025-06-30 08:00:00 发布

原创最新推荐文章于 2025-06-30 08:00:00 发布 · 5.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#项目打包

NodeJS 专栏收录该内容

1 篇文章

订阅专栏

1.安装 Node （自带npm）
2.进入目录（例子：/H:\idea_workspace\*进入项目web 目录*\web）
3.执行命令 npm install #下载node 需要的模块
4.执行 npm run build #构建项目

5.退出到项目根目录执行 mvn clean package -Dmaven.test.skip=true

或者

在[MavenProject] -->ProjectName(root)-->Lifecycle-->clean-->install

# 生成工程的 app.jar 包

6.在 resources目录下创建templates的文件夹
6.把 static 目录下生成的 ***.html 文件复制到templates目录下，重启项目
7.启动项目，访问路径 http://localhost:8080/[首页].html
8.用户名 admin 密码：admin@qq.com

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

adiljan4

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端性能优化六十：纯typescript项目npm打包

m0_68635815的博客

02-12

284

在借助ts-loader打包处理TS时,会依赖一个配置文件tsconfig.json文件。

IDEA实现NPM项目的自打包自发布自部署

Pleasure1234的博客

07-17

1909

最近在研究项目的打包发布以及其在生产环境下的部署谈谈Vue前端项目的自动打包，以及发布到Github Packages和部署到服务器注：由于本人将前端项目和后端项目放置在了一个项目文件夹下，所以统一使用IDEA进行打开运行以及编辑。还是推荐使用WebStorm来进行前端项目的编辑（或者VScode）还是以之前的这个校园墙仓库为例，注：使用的node版本是12.22.12GitHub - Pleasurecruise/NottinghamWall: 宁波诺丁汉大学校园墙(个人项目，管理端已上线)

参与评论您还未登录，请先登录后发表或查看评论

npm run build 打包这些玩意

01-08

npm run build 打包这些玩意打包上传项目是必备的，会遇到一些问题打包前要配置的东西： config文件夹下的index.js 中的文件中的 assetsPublicPath ：…/改为./ 不然的话会是空白页， build/util.js文件下在 ‘vue-style-loader’ 之后加一行：publicPath: …/…/ 不然的话会有图片显示不出来，字体不能正常使用 vue+element-ui样式发生了变化 main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可

Vue3 npm run build后使用http-server 查看dist文件效果

最新发布

m0_48968874的博客

06-30

425

摘要：前端项目打包后，直接打开index.html可能显示空白页。解决方法是使用http-server启动本地服务查看效果：进入dist目录，通过命令行安装http-server（npm install http-server -g）；启动服务并指定端口（如http-server -p 8000）；浏览器访问http://127.0.0.1:8000即可预览。此方法避免路径错误，确保资源正常加载。更多技巧可关注公众号“前端小知识营地”。

npm-build-jar:创建 JAR 文件

05-31

构建罐子这是一个可用于创建 JAR 存档的扩展。如果您想使用 npm 作为，例如构建 Java 应用程序，这将非常有用。一般用途如果需要，您可以创建以下配置参数。如果不指定主类，它将被打包为一个不可执行的 jar 文件。 name参数是唯一必需的参数。该脚本将创建一个名为[name]-[version].jar的 jar 文件。该版本是从package.json文件中提取的。 "config": { "main_class": "com.your.mainclass", "bin": "bin", "name": "Product Name" } 然后你唯一需要做的就是在你的package.json中创建一个脚本部分，以便将所有资源文件复制到你的 bin/classes 目录： "devDependencies": { "build-j

npm打包

qq_55961709的博客

09-01

619

npm打包

从零使用TypeScript开发项目打包发布到npm

11-21

前言 typescript作为未来前端开发的主流框架，在前端开发的...也可以npm init -y 这个是使用的默认的配置，我个人使用的是npm init 设置配置项 package name: (ming-npm-package) version: (1.0.0) description: use

自定义Vue组件打包、发布到npm及使用教程

10-16

之后，使用npm run dev命令启动项目以进行本地开发和测试。 3. 组件的编写与测试在开发自定义Vue组件时，需要在组件的.vue文件中实现相应的模板、脚本和样式。编写完毕后，需要在项目中的app.vue或其它组件中引入...

npm打包项目修改css/js等文件输出路径

逻辑无道

12-01

1142

import path from 'path'; function getModulePackageName(module) { if (!module.context) return null; const nodeModulesPath = path.join(__dirname, '../node_modules/'); if (module.context.substring(0, nodeModulesPath.length) !== nodeModulesPath) { .

Vue使用npm打包前台项目到Nginx

2201_75785454的博客

05-21

3851

Vue使用npm打包部署到Nginx

npm打包整个过程

前端小99的博客

12-02

1万+

这里注意点package.json文件夹 main放入放入当前npm run build 打包后的。当包有修改的时候， 2：先修改package.json中的版本号（version），注册需要用户名，密码和邮箱，当注册完成后需打开邮箱进行验证（邮箱不验证无法上传）打开npm官方网站： www.npmjs.com;然后再执行npm publish；（不修改版本号上传会失败）后续会让填用户名密码和邮箱；上传时不能使用淘宝镜像。

组件化npm包打包和使用

zhou13528482267的博客

10-30

1671

npm uninstall helloworld-1.0.1.tgz //删除组件。npm install helloworld-1.0.1.tgz //加载组件。npm config get registry //查看 npm 配置私库地址。npm unpublish ${包名} --force //删除已发布的包。新建packages/HelloWorld/index.vue文件。npm install ${包名} //下载对应包。npm publish //将npm包推送到私库。

前端系列-3 前端打包工具和插件介绍(npm+babel+webpack)

shengyu

04-27

5516

JS不断发展，浏览器的适配速度没有跟上，引入了一个问题：用高级(ES6+)的JS语法开发的代码，无法在支持低版本(ES5)JS语法的浏览器上运行。babel作为转译工具，可以实现将ES6转译为ES5，为该问题提供了一个解决方案。label常被集成到webpack中进行打包；随着vue3的出现, vite+esbuild的占有率相比webpack+babel更高。

组件的打包和发布（npm、github、gitee）

m0_68110835的博客

12-28

1364

个目录项创建文件【command > build.js】

npm项目创建打包发布

热门推荐

事在人为2018的博客

05-27

5万+

操作系统：windows 7前提是已经安装了nodejs和npm。当前nodejs版本：v8.9.4；npm版本：5.6.0。本示例工具使用Visual Studio Code 1.20.1(vs code)，也可以使用其它工具下面开始操作在某个磁盘分区下创建项目目录：my-npm-project。例如：E:\Workspace\my-npm-project启动vs code点击vs code左上...

用npm命令打包发布到服务器上的代码~

a158086780的专栏

06-01

1472

这三个包的依次是 ssh2 传输~~ 压缩文件夹变成.zip文件~~ ora为node环境的loading显示库。服务器只支持ftp的上传模式，所以只使用了node-ssh2的包，scp的方法不行。第三步：在build文件夹上加入deploy代码。第二步：在package.json中加入命令。nodejs版本 v12.22.12。

npm一键打包

n1355553344的博客

06-08

444

npm run build & npm run pack

centos使用npm打包前端项目

03-26

<think>好的，我现在需要帮助用户解决在CentOS系统上使用npm打包前端项目的问题。首先，我得理清楚整个流程，确保每个步骤都正确且易于理解。根据用户提供的引用内容，我需要整合相关信息，并结合自己的知识来组织步骤。首先，用户提到了安装Node.js和npm，这是基础。根据引用[1]，安装成功后需要验证版本。我应该先指导用户安装，可能使用dnf或者NodeSource的仓库，因为CentOS默认的仓库可能版本较旧。接着，安装npm，不过现在Node.js通常已经包含了npm，所以可能只需要安装Node.js即可。然后是项目准备部分。用户需要将代码上传到服务器，可能通过git或者FTP，引用[2]提到了git的配置，所以可能需要先安装git。不过用户的问题是关于npm打包，所以这部分可能简化为克隆代码或者上传代码到目录。接下来是依赖安装，使用npm install，这一步常见但需要注意可能遇到权限问题，可能需要使用--unsafe-perm参数，尤其是当有本地模块时。引用里没有提到这点，但根据经验，可能需要补充。然后是执行打包命令，通常npm run build，但具体命令取决于项目配置，比如Vue项目可能用build，其他框架可能不同。用户提到的是Vue示例，所以需要明确这点。引用[2]和[3]都提到前端项目打包，所以这里需要强调根据项目框架使用正确的命令。接下来是处理静态文件，打包后的文件通常在dist目录，需要配置服务器来托管。用户可能想部署到Nginx或者使用Docker，引用[5]提到了Docker和Nginx，所以可能需要简要说明后续部署步骤，但用户的问题只问到打包，所以可能点到为止。另外，用户可能遇到环境问题，比如node_modules权限问题，这时候需要指导用户使用chmod或sudo正确处理权限。引用中没有提到，但这是常见问题，应该包含在注意事项里。最后，生成相关问题需要考虑用户可能的后续步骤，比如部署、优化、管理进程等，参考引用中的pm2、Docker、Nginx，可以生成相关问题。需要确保步骤清晰，命令正确，并且覆盖可能的问题点。同时，引用对应的引用来源，比如安装Node.js和npm成功验证来自引用[1]，部署到Docker来自引用[3]和[5]，pm2管理来自引用[4]。可能还需要检查是否需要全局安装npm包，或者项目是否需要特定配置，比如.env文件。但用户的问题比较基础，可能不需要深入这些细节，保持回答简洁明了。总结下来，步骤应该是：安装Node.js和npm -> 准备项目代码 -> 安装依赖 -> 执行打包命令 -> 处理打包后的文件。每个步骤给出具体命令和注意事项，并引用相关的内容支持。</think>### 如何在 CentOS 上用 npm 打包前端项目 #### 1. **安装 Node.js 和 npm** - CentOS 默认仓库的 Node.js 版本可能较旧，建议通过 NodeSource 安装最新版本： ```bash curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash - sudo dnf install -y nodejs ``` - 验证安装是否成功： ```bash node -v # 查看 Node.js 版本 npm -v # 查看 npm 版本 ``` 若显示版本号（如 `v18.x.x`），则安装成功[^1]。 #### 2. **准备项目代码** - 将项目代码上传至 CentOS 服务器。常用方法包括： - 通过 Git 克隆代码： ```bash git clone <项目仓库地址> cd <项目目录> ``` - 使用 FTP/SFTP 工具上传代码[^2]。 #### 3. **安装项目依赖** - 进入项目根目录，运行以下命令安装依赖： ```bash npm install ``` - **注意**：若遇到权限问题（如 `EACCES`），可添加 `--unsafe-perm` 参数： ```bash npm install --unsafe-perm ``` - 国内用户可配置淘宝镜像加速： ```bash npm config set registry https://registry.npmmirror.com ``` #### 4. **执行打包命令** - 根据项目框架执行对应的打包命令： - **Vue 项目**： ```bash npm run build # 默认生成 dist 目录 ``` - **React 项目**： ```bash npm run build # 默认生成 build 目录 ``` - 打包完成后，静态文件会输出到指定目录（如 `dist/` 或 `build/`）[^3]。 #### 5. **处理打包后的文件** - 将生成的静态文件部署到服务器： - **直接托管**：使用 Nginx 配置指向打包目录： ```nginx server { listen 80; root /path/to/dist; index index.html; } ``` - **Docker 部署**：构建镜像并运行（参考引用[5]）： ```bash docker build -t my-frontend . docker run -d -p 80:80 my-frontend ``` #### 注意事项 - **权限问题**：若运行 `npm install` 或打包命令时报错，尝试： ```bash sudo chmod -R 777 node_modules # 谨慎使用，仅限测试环境 ``` - **环境变量**：生产环境需配置 `.env` 文件或通过命令行注入变量： ```bash npm run build -- --mode production ``` --- ###