# Vue项目通过Yarn打包dist目录
在Vue项目中，我们通常需要将代码打包成静态文件以便于部署到生产环境。Vue提供了一种简单的方式来打包项目，即使用Yarn工具。本文将介绍如何通过Yarn来打包Vue项目并将生成的文件输出到dist目录。
## 什么是Yarn？
Yarn是一个由Facebook、Google、Exponent和Tilde共同开发的JavaScript软件包管理工具
原创
2024-04-19 06:21:45
276阅读
一、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阅读
作者主页：Designer 小郑作者简介：软件工程师一枚，来自浙江宁波，负责开发管理公司OA项目，专注软件前后端开发（Vue、SpringBoot和微信小程序）、系统定制、远程技术指导。蓝桥云课认证讲师，全栈领域优质创作者，在校期间参加PAT乙级考试获得满分，三年ACM竞赛经验，斩获国奖两项，省奖五项。热爱技术、专注业务、开放合作、乐于分享，期待你我共同成长！主打方向：Vue、SpringBoot
# 使用 Docker 打包 Vue.js 应用的完整指导
Vue.js 是一个流行的前端框架，而 Docker 是一个快速、轻量级的容器化平台。将 Vue.js 应用打包成 Docker 镜像，可以使其在不同的环境中轻松部署。本文将向您展示如何实现这一目标，并提供详细的步骤和代码示例。
## 流程概述
| 步骤 | 描述
springbot+vue项目的打包部署
springbot+vue项目的打包部署使用vue进行前后端分离式开发，但最终部署还是要将前端放到后端中统一部署。一、打包1.前端打包（1）流程通常，我们的前端是在 VsCode 中开发的，如果想要打包，只需要 ctrl+shift+U 调出命令行；然后输入npm run build 之后在项目中会自动
转载
2024-03-23 21:37:41
798阅读
点赞
一、前言spring boot是要打成jar包运行的，项目采用了前（VUE）后（SpringBoot）端完全分离，开发完成后需要整合到一起发布，这就要引出这篇博客的由来了；一开始的时候是前端VUE开发完成后打成dist包然后发给我（前后端不在一起开发），我拿到dist包后解压然后放到springboot的static目录下。然后将项目打成jar包。最后部署，一次两次没问题，但是如果是联调阶段，前端
转载
2024-07-26 11:53:43
1637阅读
Jenkins自动布署Vue项目 目标： 本地push代码到Gitee，Webhook自动触发jenkins上的构建动作,完成安装node插件并且打包，然后通过Publish Over SSH插件，将打包出来的文件，部署到目标服务器上。准备：gitee 账号和项目centos 服务器服务器安装 Java SDK服务器安装 nginx并启动服务器安装jenkins并启动安装Jenkins插件：下载
转载
2024-05-25 22:50:59
233阅读
目录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 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。先来描述一下期间遇到的问题有哪些：打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。打包好的静态资源均是绝对路径，无法引入进项目，也是 4
转载
2024-03-19 10:12:40
124阅读
1、将dist包拖到html中vim /mydata/nginx/conf/nginx.confuser nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
ht
转载
2021-04-28 08:37:53
1628阅读
2评论
vue.config.js// 输出文件目录(默认dist) outputDir: 'web',const path = require('path')const resolve = dir => path.join(__dirname, dir)module.exports = { // 基本路径 publicPath: './', // 输出文件目录(默认dist) outpu
原创
2022-02-27 10:25:49
3490阅读
vue.config.js// 输出文件目录(默认dist) outputDir: 'web',const path = require('path')const resolve = dir =
原创
2021-07-13 14:08:07
2770阅读
## 如何使用 TypeScript 打包到 dist 目录
TypeScript 是一种现代化的编程语言，它允许我们使用静态类型来构建大型应用程序。在开发 TypeScript 应用程序时，最后一个步骤通常是将代码打包到一个 `dist` 目录中，以便于发布和部署。本文将为你详细介绍如何实现这一过程。
### 整体流程
以下是将 TypeScript 代码打包到 `dist` 目录的主要步
这是第三方依赖库（如 Vue、Vuex、Vue Router 等）的 JavaScript 文件，被打包成一个单独的文件。这些字体文件通常被用于替代传
原创
2024-06-15 00:32:51
283阅读
总体结构介绍 详细介绍 1.build文件夹（webpack配置） build文件夹里面最主要是的webpack的相关配置文件，在新一代的vue-cli中，没有dev-server.js文件，因为它被与集成到开发环境配置文件里面了，当我们输入npm run dev启动项目的时候，最先就会启动dev-server，它会检查npm以及node版本，加载配置文件，启动服务。 2.config文件夹（vu
转载
2024-10-14 17:02:12
135阅读
vue打包的dist文件有时会显示debugger按钮如图： 1、解决方法 在vue.config.js文件中的chainWebpack(config) 函数中添加以下语句：config.optimization.minimizer[0].options.terserOptions.compress.warnings = false config.optimization.minimize
原创
2022-01-11 10:07:48
1081阅读
在Kubernetes（K8S）中部署前端应用，特别是基于Vue.js框架构建的前端应用是一项常见的任务。这篇文章将教你如何实现“vue dist部署”到Kubernetes集群中。
**整体流程**
| 步骤 | 操作 |
| --- | --- |
| 1 | 构建Vue.js应用并生成dist文件 |
| 2 | 创建Docker镜像 |
| 3 | 部署Docker镜像到Kuberne
原创
2024-04-29 12:36:39
101阅读
# Vue Dist 部署指南
## 简介
在实际开发中，我们经常需要将Vue项目打包成静态文件，并部署到服务器上。本文将介绍如何通过命令行将Vue项目打包成dist文件，并将dist文件部署到服务器上。
## 步骤概览
以下是将Vue项目打包成dist文件并部署到服务器上的主要步骤：
| 步骤 | 描述 |
|------|------|
| 1. | 打包Vue项目 |
原创
2024-04-29 12:36:50
917阅读
# 使用 Docker 部署 Vue.js 应用的简易指南
随着前端框架的迅猛发展，Vue.js 以其简洁与高效成为了许多开发者的首选工具。在开发完成后，如何高效地将 Vue.js 应用部署到服务器上成为了一个重要的话题。Docker 是一种流行的容器化技术，可以帮助我们轻松打包和部署应用。本文将介绍如何使用 Docker 部署一个 Vue.js 应用的静态文件。我们将通过一个示例项目以及相应的
原创
2024-08-11 06:50:19
60阅读
文章目录ToolTest整体说明代码实现infoFromYaml.gotoolFilePath.gosetExcel.gosftpClient.go程序执行流程main.go快速使用 ToolTest整体说明最近在练习go代码，恰好工作中有一些场景需要经常去访问某个目录下所有文件，将相对路径写入Excel并上传系统，同时打包文件上传服务器。利用工作之余，练练手学习写了一个小工具，主要实现功能如下
转载
2024-03-24 14:33:55
91阅读
