一. vue前端项目打包使用vscode开发项目在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号，因为这是在实际的部署当中所以必须要在生成环境下进行项目的部署。 如图所示：在config目录下的index.js文件当中要改assetsPublicPath: ‘./’ 否则不能正确载入静态文件build: {
// Template for index
转载
2023-08-24 13:17:42
937阅读
遇到的问题为vue项目webpack-dev-server配置后本地连接服务器地址正常请求，但是打包之后请求服务器接口一直是404；Vue前端打包：1.npm run build:prod 打包 2.npm run preview 打包正式环境预览.env.product(生产环境配置)文件，我这边是将接口地址也放到了里面VUE_APP_API_URLvue.config.js文件 反向代理及路由
转载
2023-10-19 10:50:47
191阅读
打包优化项目开发完成，优化才是精髓1.怎么打包 ：用webpack做打包（把.vue, .js, .less ------> .js, .css, .html）在项目中都会提供命令： npm run build
2.打包优化的好处:在保证功能可用的前提下，让我们的文件尽可能小在保证功能可用的前提下，让我们的页面显示出来的速度更快一些打包之后，会得到dist目录，如果希望可以双击打开index
转载
2024-01-10 13:38:52
89阅读
对于前后端分离的项目，前端项目和后端项目需要单独部署，通常会使用SpringBoot框架开发后端项目，使用Vue框架开发前端项目；后端项目的部署较为简单，一般来说就是先打成一个Jar包上传到服务器，然后使用 nohup java -jar Jar包名 & 命令启动项目即可；完整部署流程可参考文章： 而对于前端Vue项目的部署，需要使用Nginx做反向代理，原因是开发的时候我们使用的是web
转载
2024-01-08 17:47:33
62阅读
# DockerFile打包前端VUE
## 1. 什么是DockerFile？
DockerFile是Docker用来构建镜像的一种文件格式。它可以定义一系列的命令，这些命令将会在一个空白的镜像上运行，从而创建一个新的镜像。DockerFile的编写非常简单，只需按照一定的格式来书写即可。
## 2. DockerFile的基本结构
一个典型的DockerFile由多个指令组成，每个指令
原创
2024-01-11 05:14:17
197阅读
在前端开发中，使用 Vue 和 Yarn 进行项目构建是一种流行的选择。然而，打包过程中可能会遇到各种问题，本文将详细记录解决“vue yarn前端打包”问题的过程。
### 背景描述
随着前端开发框架的不断发展，Vue.js 已成为构建用户界面的强大工具。Yarn 作为一个现代的 JavaScript 包管理器，能够加速依赖安装并保证具有更高的可靠性。然而，在实际操作过程中，开发者经常会遇到
# Vue 前端 Docker 打包指南
在现代开发中，使用 Docker 来容器化应用越来越受到欢迎。尤其对于使用 Vue.js 开发的前端应用，Docker 可以让你的开发环境和生产环境尽量一致。接下来，我将引导你完成 Vue 前端项目的 Docker 打包流程。
## 整体流程
以下是实现 Vue 前端 Docker 打包的基本步骤：
| 步骤 | 说明
0.背景最近做一个基于 VUE 2 的资产后台管理系统。因为暂时没有后台人员编写数据接口，只把前端页面构建出来了。 突然有一天，领导说有客户来访，需要看一看后台管理系统的界面演示。而当前做的web项目只有纯静态，也木有上线，所以给客户演示时非常不方便，于是领导喊我将其打包成一个桌面应用程序，直接可以离线观看的那种。 当时听着也是一愣，这玩意不是应该是c++或java这种更牛逼的东西干的事情吗？
找到你的packe.json文件找到 scripts里面的命令打包命令： npm run build
原创
2022-07-25 16:33:07
1632阅读
前几天看[小猪课堂发布的nginx部署](https://zhuanlan.zhihu.com/p/431796992)，跟着做了一遍，由于本人是第一次尝试，遇见了很多问题。经过查阅和搜索，终于解决掉了。下面给大家介绍一下我的流程和遇见的问题，我们可以多讨论。
项目打包部署1.准备工作 完整的Vue项目 一台服务器 准备工作很简单，只需要一个项目和一台服务器即可，项目甚至可以只是一个html
转载
2024-07-20 07:30:28
738阅读
使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署。一.打包vue项目其实可以直接通过一下语句进行打包：npm run build默认打包情况如下: 当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置:1.首先在项目根目录下创建vue.config.js文件配置内容如下所示(附带跨域问题解决):module.exports = {
/
转载
2023-10-20 17:19:46
315阅读
目录前言一、优化静态资源二、vue项目打包体积优化1.路由懒加载2.抽离第三方js库3.小结三、代码优化1.减少页面的重排和重绘2.多设置key值四、服务器优化1.nginx服务器开启gzip文件压缩2.nginx服务器开启http2五、总结 前言最近在腾讯云上面买了一个服务器，准备把最近写好的一个vue项目打包部署上去，然后直接npm run build,把它往nginx上面一扔，然后直接访问
转载
2024-04-10 11:20:39
318阅读
webpack概述随着前端体积越来越大，功能越来越丰富，这时候就需要将前端工程化，而
webpack就是用于将前端各种文件打包起来。
一个简单的webpack应该包含以下几个概念
· 入口起点
· 输出
· 配置
· 组件
· 加载器
· 插件
· 模块
· 模块热替换
下面我们一步步的搭建webpack，逐步讲解上诉模块开发环境推荐使用JetBrain的Webstorm，有强大的代码提示，支持J
转载
2023-08-04 18:56:41
115阅读
Vue项目打包步骤Vue项目打包流程介绍生成打包报告修改默认配置指定打包入口通过external加载外部CDN资源优化组件库的打包首页内容定制路由懒加载 Vue项目打包流程介绍新手必须要懂的 Vue项目打包 ，生成打包报告为能更加清楚直观的发现我们项目中存在的问题，我们可以在打包时生成一份打包报告，打包报告生成的方式有两种：通过命令生成 通过vue-cli的命令可以生成打包报告 report.h
转载
2023-11-06 18:41:32
378阅读
一、环境搭建1. 安装node：官网下载安装包，https://nodejs.org/zh-cn/
安装检测 node -V2. 安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org3. 全局安装webpacknpm install webpack -g4. 安装脚手架vue-cli npm install -g
转载
2023-11-11 06:20:14
667阅读
npm run dev npm run serve 具体的可查看： 如果你不确定项目的具体配置，可以查看 package.json 文件中的 scripts 部分，找到启动命令。 例如： "scripts": { "serve": "vue-cli-service serve", "dev": "v
# 前端打包命令 yarn
在前端开发中，我们经常需要使用到打包工具来将多个文件合并为一个或者多个文件，以提高网站的加载速度和性能。其中，yarn 是前端开发中常用的包管理工具之一，可以帮助我们快速安装、管理和更新依赖包。
## 什么是 yarn？
Yarn 是由 Facebook、Google、Exponent 和 Tilde 四家公司共同开发的一款包管理工具，它可以替代 npm（Node
原创
2024-06-11 04:57:12
64阅读
# 前端打包命令的科普：使用 Yarn
在现代前端开发中，打包命令是一个不可或缺的环节。打包不仅仅是把代码放到一起，而是一个优化和编译的过程，让我们的应用更加高效、可维护。在这篇文章中，我们将重点讨论如何使用 Yarn 工具来管理前端项目的依赖，并进行打包。
## 什么是 Yarn？
Yarn 是 Facebook 开发的一款 JavaScript 包管理工具，旨在解决 npm （Node
原创
2024-10-13 04:19:24
31阅读
# wbstorm 前端打包命令解析
在现代前端开发中，打包是一个至关重要的环节。打包工具不仅能够将我们的代码进行压缩、优化，还能够减少加载时间，提高用户体验。在这篇文章中，我们将重点讨论 `wbstorm` 工具的前端打包命令，并通过示例和图示来帮助你理解整个流程。
## 什么是 wbstorm？
`wbstorm` 是一个前端开发工具，用于构建和打包 JavaScript、CSS 等资源
前端工程化越来越普及，最热的打包工具必须是webpack。在webpack4.0以前，webpack打包的配置文件是极其繁琐的。而parcel宣称0配置、快速的特性，也让它有一席之地。今天，我们聊聊parcel的适用场景和那些踩过的坑。1 项目目标题录结构 相信第一眼看到parcel的项目目录，大部分的人都会产生这样的疑问，这是现代化前端开发模式吗，确定没有回jsp那个时代。对的，parcel它就
