# 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阅读
config/index.jsbuild 中的 assetsPublicPath: './',在编译 npm run build
转载
2021-05-26 00:29:00
1121阅读
2评论
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文件与，.js文件不要重名，否则页面内容会丢失 ps:使用vue-admin-template中遇到的问题，（也不确定不是同一文件夹下能不能同名） ...
转载
2021-10-09 16:39:00
1186阅读
2评论
Nginx的安装与配置
Nginx官网下载所需版本安装 解压下载好的nginx修改nginx配置文件，配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段 里面的相关注释是在是太多了，那么我把所有的注释清除一下(这是方便看清nginx配置到底需要什么基础的配置)worker_processes 1; ##指明了nginx要开启的进程数
在config文件夹下的index.js配置文件里面给路径前面加上 .
原创
2022-03-02 14:42:45
878阅读
这是第三方依赖库（如 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阅读
