前端项目打包详细

最新推荐文章于 2025-11-10 13:27:31 发布
原创 最新推荐文章于 2025-11-10 13:27:31 发布 · 1.5w 阅读 · 21 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue #npm

本文详细介绍了前端项目使用npm run build命令进行打包后，生成的dist文件及其用途。讨论了hash模式下项目正常上线的情况，以及history模式下可能出现的刷新错误，解释了该错误是由于服务器路由未配置导致。解决方案是调整服务器配置，或确保前端通知后端进行相应设置。对于开发者而言，理解这两种路由模式的区别及其在实际部署中的应用至关重要。

项目打包命令为：npm run build 

打包后会文件夹中自动生成一个dist文件 
这个文件就是最终上传服务器的文件（或者将这个dist给后端）

dist中的index打开是本地看不见什么的。如果想查看项目 ----

1.在config目录中找到index。js
build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',-----这里加上 .
然后打包（但是这个网易云项目没有默认“/”路由所以会跳转失败）


注：路由模式 hash模式 带#  可以正常打包上线即可 不会有错误

    路由模式如果是 history 那么经过几次页面前进后退后 当刷新就会出错
（因为history是完整路由会优先执行服务器路由）
    解决办法：后端程序员修改 服务器  ，，前端告诉一声

vue项目打包命令_前端开发：Vue项目打包步骤
weixin_32413177的博客
01-30 2万+
在前端开发过程中，开发项目编码是必须的能力，但是开发之后的上线也是不可缺少的技能。而且现在的前端开发用的打包都是借助于三方插件来完成的，本篇博文就来分享一下前端项目打包的流程步骤，本案例以Vue来介绍，其他前端技术的打包步骤这里不再过多介绍。 Vue项目打包一般是基于webpack+vue-cli下的操作，具体的操作命令也很简单，只需要在终端里面输入打包命令：npm run build ...
前端项目打包成exe文件
fangcaojushi的博客
06-26 1837
6、在electron-quick-start项目中找到入口文件 main.js ，修改打包的文件路径为我们的index.html（替换成我们的文件非常非常的重要，注意行数，一般都在16行多一点）8、运行命令打包，然后项目中会出现一个 App-win32-x64 的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 App.exe 文件，App.exe就是这个项目的启动文件。2、修改自己项目的vue.config.js，路径必须修改为 ./，不是这个后续打包好的页面可能会出现白屏，加载不出来的情况。
前端项目打包部署
cyt涛的博客
09-21 4891
项目打包: 使用将项目转换为可供生产环境使用的静态文件，输出到dist目录。上传文件:将本地打包生成的 dist 目录下的文件拷贝到服务器的目录。Nginx 配置: 配置 Nginx，设置静态文件路径以及反向代理，解决跨域问题。访问项目: 通过服务器 IP 或域名访问项目。
前端框架 打包
11-13
该资源包括前端常用的组件库和js框架库，由于react太多，所以没有加入TAT，其中包括Vue（vue大法好，可能不全），angular（据说用的不多了），animate（一款css的动态库，用animation做的），core.js（用的比较少，貌似是jQ的包），H-ui（比较不错的组件库），jQuery（这个不用说了吧），layui（也挺好用的UI组件），less（sass，scss，less一起的），swiper（一个挺好用的轮播图的库，强烈推荐），Tween（运动函数库），sport.js万能运动公式
前端的dist包放到后端springboot项目下一起打包
2509_93990209的博客
11-10 321
2.找到后端项目的resource 目录,我整个项目的jar包是生成在admin模块下，此处可能不存在static文件夹，直接创建以一个，然后将dist里面的文件复制到static下（是里面，不包括dist）图标，图片的问题，如果后端做了拦截，需要配置放行，例如element-ui 的图标，系统的图标，首页的图片等。这种方式部署，还有不少的问题，我图片还有部分图标路径都有问题，还需要调整，总的来说前后端分离的项目，老老实实使用nginx分离部署比较好。前端的路由还要配置为hash模式，否则的话刷新会报错。
前端打包zip
11-12
前端用于打包文件和图片的JS插件，用前端打包文件可以减轻服务器端的压力，免去服务器端生成压缩包，再下载，后删除的繁琐过程和服务器压力
前端项目打包并部署
热门推荐
喵酱
04-12 1万+
在当前项目路径下，执行命令在当前项目路径下，生成 一个dist文件夹。将来部署项目，是部署的dist这个文件。
前端项目打包与发布
leva的博客
02-23 1万+
所以Vue官方推出一款Chrome插件Vue-devtools，Vue-devtools是一款基于Chrome浏览器的插件，用于调试Vue应用，这可以极大地提高调试效率。当添加完Vue-devtools扩展程序之后，在调试Vue应用的 时候，打开F12，在Chrome开发者工具中会看一个Vue栏，单击之后就可以看见当前页面Vue对象的一些信息，如图7-22所示。步骤1：首先安装全局的serve，在命令行输入命令npm install-g serve，Vue-devtools的安装步骤如下。
前端项目部署指南，前端项目打包上线
weixin_47389477的博客
07-14 857
前端开发完项目，打包dist文件，一般情况下，把dist文件包交给运维，然后运维部署上线，这样确实没啥问题，但是小公司或者初创公司压根没有运维，可能后段也是二把手，这时，前端能进行线上部署，那你就牛逼了。
记一次react前端项目打包优化的方法
11-20
之前一年多前接手的一个react项目，前段时间因为做业务中台项目，对公司现有的应用项目做中台化改造，这期间将项目部署到uat环境，测试期间，测试小妹妹和产品大叔都吐槽进入uat项目的时候要load很久，白屏时间超过...
前端打包性能优化
01-20
本文将详细介绍如何进行前端打包优化，主要包括查看打包文件、使用GZIP压缩、拆分包、共用npm依赖以及优化配置。 首先，查看打包后的文件大小至关重要，因为这可以帮助我们了解哪些模块占用了大量空间。通常，我们...
(源码)基于webpack5的前端项目打包实践.zip
03-02
# 基于webpack5的前端项目打包实践 ## 项目简介 本项目聚焦于webpack5的打包配置实践，借助webpack打包工具对前端项目展开打包、拆分及优化等操作，进而提升项目的打包效率与性能。项目涵盖基本的webpack配置、运用...
前端构建和打包
天涯学馆
10-26 2573
Parcel 是一个快速、零配置的 Web 应用打包工具，它旨在简化前端开发流程，自动处理 JavaScript、CSS、HTML、图片等资源的打包、优化和压缩。Vite 是一个由 Vue.js 作者尤雨溪开发的现代化的前端构建工具，它利用浏览器原生的 ES 模块导入功能，提供了快速的冷启动速度和高效的开发服务器体验。Grunt 是一个基于 Node.js 的任务运行器，它通过简单的配置文件来自动化常见的构建任务，如编译、测试、合并和压缩代码等。首先，确保你的系统中安装了 Node.js 和 npm。
前端打包部署
Web995的博客
07-19 6574
前端部署
前端项目打包
qq_55061257的博客
03-31 8666
前端项目打包
前端系列-3 前端打包工具和插件介绍(npm+babel+webpack)
shengyu
04-27 5682
JS不断发展，浏览器的适配速度没有跟上，引入了一个问题：用高级(ES6+)的JS语法开发的代码，无法在支持低版本(ES5)JS语法的浏览器上运行。babel作为转译工具，可以实现将ES6转译为ES5，为该问题提供了一个解决方案。label常被集成到webpack中进行打包；随着vue3的出现, vite+esbuild的占有率相比webpack+babel更高。
web前端开发之webpack打包
Web_chicken的博客
03-09 7652
前端工程化 一、模块化 1.1 服务器端模块化规范 CommonJS 模块分为单文件模块与包 模块成员导出：module.exports和exports 模块成员导入：require (‘模块标识符’) 例： a.js let a = 10 let b = 20 module.exports = { a,b } b.js const a = require('./a.js') console.log(a) 1.2 ES6模块化 ES Module把一个文件当作一个模块，每个模块有自己的独立
前端打包问题
galaxyfanqi的博客
01-11 1997
angular项目，打包部署常规问题
前端打包
weixin_43924896的博客
04-09 1028
为什么要打包 转载 js作为一门脚本语言，在没有node的时候，只能通过< script >标签插进html去运行，单个的js文件离开了html他什么都不是。 如果一个网站功能很多，我要按照功能划分写15个js文件，那我就要插入15个< script src="" >去引那些js文件，还tm得注意引用顺序和插入的位置，一方面难以维护，一方面增加了网页加载时的请求数量（15个不算多，如果是200个js文件的话，那得多蛋疼）。 自从有了node之后，单个的js文件离开了html以后也可以
使用idea打包前端项目
最新发布
12-13
<think>我们正在处理用户关于如何使用IntelliJ IDEA打包前端项目的问题。用户提供了几个站内引用，我们需要从中提取有用信息并结合我们的知识给出清晰步骤。 根据引用内容： 1. 引用[1]提到在IDEA中运行Vue项目时如果未安装环境，npm命令会报错，因此我们需要确保环境已安装。 2. 引用[2]提供了将Vue打包的dist文件夹放入后端并打包成jar包的步骤，但用户问题仅涉及前端打包。 3. 引用[3]详细说明了前端工程化项目（如Vue/React/Vite/Angular）在IDEA中打包的通用步骤：先安装依赖，然后执行构建命令生成dist或build文件夹。 4. 引用[4]提到了Webpack的一些插件，但用户问题主要是打包步骤，插件配置属于具体项目配置，不是必须步骤。 5. 引用[5]提到了Maven打包的配置，这属于后端打包，与前端直接打包无关。 因此，我们聚焦于引用[3]的步骤，因为它是关于前端项目打包的通用方法。 注意：前端项目打包通常不依赖于IDEA，而是依赖于项目本身的构建工具（如npm、yarn、pnpm等）。IDEA主要提供终端和界面集成。 步骤总结： 1. 确保已安装Node.js和npm（或yarn、pnpm等）。如未安装，需先安装。 2. 在IDEA中打开前端项目。 3. 通过IDEA的终端安装项目依赖（如果尚未安装或需要更新）。 4. 运行构建命令（如npm run build）来生成静态文件（通常在dist或build目录）。 详细步骤： 步骤1：安装Node.js和npm - 下载地址：https://nodejs.org/ - 安装后，在终端输入`node -v`和`npm -v`验证。 步骤2：在IDEA中打开项目 - 使用IDEA的Open或Import打开前端项目文件夹。 步骤3：安装依赖 - 打开IDEA底部的Terminal（终端）。 - 进入项目根目录（如果不在）。 - 执行安装命令： npm install # 使用npm 或 yarn install # 使用yarn 或 pnpm install # 使用pnpm 步骤4：执行打包命令 - 在同一个终端中，运行构建命令（具体命令可能因项目而异，查看项目package.json中的scripts部分）： npm run build # 多数Vue/React项目 或 yarn build 或 pnpm build - 构建完成后，项目根目录下会生成dist（或build）文件夹，里面就是打包好的静态文件。 补充说明： - 如果项目使用了Vite、Angular等，构建命令可能不同，请参考项目文档。 - 如果遇到npm命令不可用，检查Node.js安装和环境变量配置（引用[1]的问题）。 如果用户需要将前端打包结果与后端整合（如引用[2]），则需额外步骤，但用户问题仅询问前端打包方法。 因此，回答将聚焦于前端项目本身的打包。 注意：如果用户的项目是纯前端，那么打包结果就是dist文件夹，可以直接部署到静态服务器。 根据要求，我们还需要生成相关问题。 现在，我们按照要求结构化回答。 </think> ### 使用 IntelliJ IDEA 打包前端项目的方法 在 IntelliJ IDEA 中打包前端项目（如 Vue/React/Vite/Angular）主要依赖 Node.js 环境和构建工具（如 Webpack/Vite）。以下是通用步骤： #### **1. 环境准备** - ✅ **安装 Node.js** 确保系统已安装 [Node.js](https://nodejs.org/)（包含 npm）。终端验证： ```bash node -v # 检查Node版本 npm -v # 检查npm版本 ``` 若报错 `npm 不是内部命令`，需[配置环境变量](https://nodejs.org/docs/latest/api/repl.html#repl_environment_variable_options) 或重装 Node.js[^1]。 - ✅ **IDEA 插件** 安装 `NodeJS` 插件： `Settings > Plugins > 搜索 "NodeJS" 并安装`。 #### **2. 依赖安装** 1. 在 IDEA 中打开前端项目。 2. 打开底部 **Terminal** 终端（或系统终端进入项目根目录）。 3. 安装依赖： ```bash npm install # 或 yarn install / pnpm install ``` #### **3. 执行打包** - 在终端运行构建命令（具体命令参考项目 `package.json` 的 `scripts`）： ```bash npm run build # Vue/React/Vite 项目常用命令 ``` - 打包后生成静态文件夹（通常为 `dist/` 或 `build/`），内含 `index.html` 和编译后的 JS/CSS。 #### **4. 高级配置（可选）** - **Webpack 插件**：如使用 Webpack，可配置： - `HtmlWebpackPlugin`：自动生成 HTML 文件[^4]。 - `CleanWebpackPlugin`：清理旧构建文件。 - `VueLoaderPlugin`：Vue 项目必需插件[^4]。 - **自定义输出路径**：在 `vue.config.js` 或 `webpack.config.js` 中修改 `output.path`。 #### **5. 与后端整合（如需生成 JAR）** 若需将前端静态文件嵌入 Spring Boot 等后端项目： 1. 将 `dist/` 文件夹重命名为 `static`，复制到后端项目的 `src/main/resources/` 目录下[^2]。 2. 在 IDEA 中： - 打开后端项目 - 点击右侧 **Maven 工具栏** - 依次执行 `clean` → `package` 3. 打包后的 JAR 文件生成在 `target/` 目录（名称如 `XXX-0.0.1-SNAPSHOT.jar`）[^2][^5]。 > **注意**：纯前端项目无需 JAR 包，直接将 `dist/` 部署到 Nginx 或云存储即可。 --- ### 常见问题解决 - **报错 "npm 不是内部命令"**： 重新安装 Node.js 并勾选 **"Add to PATH"** 。 - **打包后页面空白**： 检查路由是否配置为 `history` 模式（需服务器支持），或修改为 `hash` 模式。 - **静态资源路径错误**： 在 `vue.config.js` 中设置 `publicPath: './'`（相对路径）。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Technical genius

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值