作者主页：Designer 小郑作者简介：软件工程师一枚，来自浙江宁波，负责开发管理公司OA项目，专注软件前后端开发（Vue、SpringBoot和微信小程序）、系统定制、远程技术指导。蓝桥云课认证讲师，全栈领域优质创作者，在校期间参加PAT乙级考试获得满分，三年ACM竞赛经验，斩获国奖两项，省奖五项。热爱技术、专注业务、开放合作、乐于分享，期待你我共同成长！主打方向：Vue、SpringBoot
一、vue单文件组件开发流程（webpack打包）1）源文件目录结构2）package.json3）webpack.config.js HTML Webpack Plugin依据html模板生成一个自动引用你打包后的文件（js或css）的新的html页面，新文件默认名称为index.html。 运行.vue文件，需要依赖vue、vue-loader、vue-template-compiler这
转载
2024-08-17 12:28:24
48阅读
# 使用 Docker 打包 Vue.js 应用的完整指导
Vue.js 是一个流行的前端框架，而 Docker 是一个快速、轻量级的容器化平台。将 Vue.js 应用打包成 Docker 镜像，可以使其在不同的环境中轻松部署。本文将向您展示如何实现这一目标，并提供详细的步骤和代码示例。
## 流程概述
| 步骤 | 描述
[从入门到入土(后端篇)]三,前端项目部署（nginx）当本地项目没有问题后，我们需要将其部署到服务器上，让别人可以进行访问。我所知道的方法有：1.nginx部署 2.后端部署 3.oss部署后端部署就比较简单，前端项目打包后直接给后端人员就行。所以我将写写怎么利用nginx部署和oss部署这篇文章将讲解如何部署前端项目到nignx一. 前端项目打包执行命令行npm run build如果需要打包
转载
2023-12-01 09:51:31
421阅读
# Vue项目通过Yarn打包dist目录
在Vue项目中，我们通常需要将代码打包成静态文件以便于部署到生产环境。Vue提供了一种简单的方式来打包项目，即使用Yarn工具。本文将介绍如何通过Yarn来打包Vue项目并将生成的文件输出到dist目录。
## 什么是Yarn？
Yarn是一个由Facebook、Google、Exponent和Tilde共同开发的JavaScript软件包管理工具
原创
2024-04-19 06:21:45
276阅读
目录1、安装docker2、安装Docker Compose3、配置docker-compose.yml4、通过 Compose 创建 jenkins5、配置 jenkins6、手动备份Jenkins数据7、如何升级Jenkins版本8、给Vue项目编写Dockerfile9、配置Jenkins任务10、常见问题11、总结 1、安装docker我的是腾讯云主机 CentOS 81.1 使用命令安
转载
2024-04-09 19:20:58
79阅读
一、什么是设计模式一般来说，设计模式代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用，在我们平时的软件开发中，经常需要用到各种设计模式，设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结，使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。设计模式可以说是软件工程的基石，合理的使用设计模式，可以使我们的代码真正的工程化，在项目中使用设计模式可以
遇到的问题为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阅读
项目打包命令为：npm run build 打包后会文件夹中自动生成一个dist文件 这个文件就是最终上传服务器的文件（或者将这个dist给后端）dist中的index打开是本地看不见什么的。如果想查看项目 ----1.在config目录中找到index。js build: {
// Template for index.html
index: path.
转载
2023-06-29 15:58:49
348阅读
# Vue 前端 Docker 打包指南
在现代开发中，使用 Docker 来容器化应用越来越受到欢迎。尤其对于使用 Vue.js 开发的前端应用，Docker 可以让你的开发环境和生产环境尽量一致。接下来，我将引导你完成 Vue 前端项目的 Docker 打包流程。
## 整体流程
以下是实现 Vue 前端 Docker 打包的基本步骤：
| 步骤 | 说明
# 使用 Docker 部署 Vue.js 应用的简易指南
随着前端框架的迅猛发展，Vue.js 以其简洁与高效成为了许多开发者的首选工具。在开发完成后，如何高效地将 Vue.js 应用部署到服务器上成为了一个重要的话题。Docker 是一种流行的容器化技术，可以帮助我们轻松打包和部署应用。本文将介绍如何使用 Docker 部署一个 Vue.js 应用的静态文件。我们将通过一个示例项目以及相应的
原创
2024-08-11 06:50:19
60阅读
文章目录背景分类转译器打包器对比gulp VS webpackBundle vs Bundleless（代表就是webpack VS vite）其他比较个人理解总结官网 背景做前端也有好多年了，从最早的 jQuery 时代到现在的三大框架，这过程中用到了很多构建工具，今天就来盘点一下我们前端开发常用的这些构建工具。盘点之前呢，我们先聊聊现代前端开发的痛点，也是这些构建工具出现的原因：开发过程注重
打包优化项目开发完成，优化才是精髓1.怎么打包 ：用webpack做打包（把.vue, .js, .less ------> .js, .css, .html）在项目中都会提供命令： npm run build
2.打包优化的好处:在保证功能可用的前提下，让我们的文件尽可能小在保证功能可用的前提下，让我们的页面显示出来的速度更快一些打包之后，会得到dist目录，如果希望可以双击打开index
转载
2024-01-10 13:38:52
86阅读
# 实现“vue 前端工程打包 docker”教程
## 流程概述
通过以下步骤，我们可以将Vue前端工程打包成Docker镜像：
```mermaid
journey
title Vue前端工程打包Docker流程
section 准备工作
确认Vue项目包含Dockerfile
安装Docker
section 打包Vue前端工程
原创
2024-04-29 04:56:09
35阅读
# 前端Vue项目Docker打包流程
## 1. 简介
在介绍具体的步骤之前，我们先来了解一下Docker和Vue.js的基本概念。
### Docker
Docker是一种容器化技术，可以将应用程序及其依赖打包成一个独立的、可执行的容器。通过Docker可以简化应用程序的部署和管理，并提供了一致的运行环境。
### Vue.js
Vue.js是一款流行的前端框架，用于构建用户界面。它具有
原创
2023-10-01 06:27:00
201阅读
一、去除生产环境sourceMapvue项目打包之后js文件夹中，会自动生成一些map文件，占用相当一部分空间map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。生产环境是不需要sourceMap的，如下配置可以去除module.exports = {
//去除生
转载
2023-12-08 19:09:26
202阅读
springbot+vue项目的打包部署
springbot+vue项目的打包部署使用vue进行前后端分离式开发，但最终部署还是要将前端放到后端中统一部署。一、打包1.前端打包（1）流程通常，我们的前端是在 VsCode 中开发的，如果想要打包，只需要 ctrl+shift+U 调出命令行；然后输入npm run build 之后在项目中会自动
转载
2024-03-23 21:37:41
798阅读
点赞
上一篇文章记录了怎么在本地修改前端，现在我要把我的修改添加到部署到本地的前端的docker容器中，然后打包这个容器成为一个本地镜像，然后把这个本地镜像上传到阿里云的容器镜像仓库，这样就方便以后的实机部署。本地环境还是Ubuntu14-64bit没有变，其实就是上一篇文章的继续，电脑我都没关。。。1.首先在本地部署前端的镜像，在这个文件里，找到oj-backend，直接pull这里的imaged
转载
2024-05-30 14:57:35
110阅读
搭建一个vuepress项目准备工作项目搭建工作安装vuepressvuepress配置首页配置核心配置 准备工作项目搭建工作打开或者新建一个项目。新建项目：// 新建项目目录
mkdir myVuepress
cd myVuepress
// 快速生成pachage.json文件
npm init -y安装vuepress安装vuepress包npm install vuepress添加指令
转载
2023-09-04 12:53:25
193阅读
2、在项目底部终端里面输入打包命令：npm run build 回车，即可进行打包； 3、经过短暂的等待，如果项目没有什么报错，就直接提示打包完成； 4、打包成功之后，会在项目工程目录里面生成了一个“dist”文件目录，然后单击打开，即可看到dist目录下的文件； 5、然后鼠标右键选中dist文件，然后找到文件位置进入，压缩打包dist文件，上传到服务器，即可。 附录：Vu
转载
2023-10-31 21:01:11
83阅读
