vue打包

已于 2022-08-24 10:38:48 修改
阅读量360 收藏
点赞数
文章标签： vue.js javascript 前端
于 2022-08-24 10:34:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shlhhy/article/details/126499106
版权

前端的vue开发完成后，需要打包为dist供后台使用，此处需要写一个自动打包的脚本

1. npm安装

在npm官网下载安装包：https://nodejs.org/download/release/v12.22.12/，这里使用了12.22.12的版本。
安装后，配置环境变量，将npm的安装路径添加到path中

C:\Program Files\nodejs

在这里插入图片描述

  • 查看安装是否成功，返回版本号，即安装成功
node -v
npm -v

2. 打包

  1. 在vue的项目目录下打开cmd
  2. 安装依赖
npm install
  1. 打包，生成dist目录
 npm run build

在这里插入图片描述

shlhhy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE,webpack简单使用脚本打包（手动配置）
NI_computer的博客
10-14 854
Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过loader的转换，任何形式的资源都可以视作模块，比如CommonJs模块、AMD模块、ES6模块、CSS、图片、JSON、Coffeescript、LESS等。 webpack官网地址 webpack的简单使用： 使用前提：已经安装了node.js最近版本 1.初始化项目 进入项目中 npm init 一直
vue打包后显示空白正确处理方法
08-28
很多朋友遇到这样的问题当vue打包后显示空白问题，遇到这样的问题怎么处理呢？下面脚本之家小编给大家分享下vue打包后显示空白正确处理方法，感兴趣的朋友一起看看吧
自动化部署vue项目到服务器
qq_18256741的博客
12-09 1947
通过js脚本实现自动化部署vue项目到nginx服务器
关于vue如何打包和介绍
秋来九月八
11-07 704
其实很简单 第一步：查看vue的package.json的scripts的配置是否如下，如果不是，修改成这个样子 "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint...
Vue.js学习系列四——Webpack打包工具的使用（装修中……）
大灰狼的小绵羊哥哥的博客
02-07 1万+
这两周一直想写webpack的知识点，却发现webpack其实要说的很具体内容挺多的。而且稀土掘金上一搜webpack有好多人都有去写webpack的知识点，所以本文中不再去重复别人的东西了，就简单记录一下我对webpack的理解。并按照老规矩附上demo以及我收藏的几篇不错的webpack入门文章以供学习参考~ 一、什么是webpack 1. webpack是虾米？ web
Vue 项目打包 及上线
LZW15082682930的博客
04-07 745
前言： 项目环境： 开发工具 Vs Code 本文演示项目由 vue-cli 脚手架创建的项目 Vue 2.0 创建项目 vue init webpack 项目名 vue init webpack my-project Vue 3.0 创建项目 vue create 项目名 vue create my-project Vue 2.0打包 1. 打开项目里面的README.md（或者在其他资料查看相关命令亦可） # admin > A Vue.js pr...
Vue中如何进行打包与部署？
热门推荐
stormjun的博客
06-10 1万+
本文介绍了Vue中如何进行打包与部署，包括使用Webpack进行打包、使用Nginx进行部署和使用Docker进行容器化部署。这些方法都是常用的Vue应用程序的打包和部署方法，可以根据实际需要选择合适的方法进行部署。
前端vue3一键打包发布
weixin_39559449的博客
05-12 1709
一键打包发布可以分为两种，一是本地代码，编译打包后发布至服务器，二是直接在服务器上拉去代码打包发布至指定目录中。两种各有使用场景，第一种是前端开发自己调试发布用的比较多，第二种是测试或者其他人员用的多，前端开发将代码上传至git中，测试人员可以在服务器上拉取指定分支如release_V0.1，然后打包发布用于测试。
vue3源码学习：打包流程实现
sky___Show的博客
12-06 1879
vue3劫持数据采用`proxy`,vue2数据劫持采用`defineProperty`,`defineProperty`有性能缺陷问题 vue3中对模块编译进行了优化，编译时生成了Block tree,可以对子节点的动态节点进行收集，可以减少比较，并且采用`patchFlag`标记动态节点 vue3采用`compositionApi`进行组织功能，解决反复横跳，优化复用逻辑（mixin带来数据来源不清晰，命名冲突等），相比`optionsApi`类型推断更加方便
第6篇 vue的打包工具webpack
最新发布
健康平安的活着的专栏
09-10 918
webpack是一个打包工具，可以把多个静态资源文件打包成一个文件。
前端项目打包并部署
喵酱
04-12 1万+
在当前项目路径下，执行命令在当前项目路径下，生成 一个dist文件夹。将来部署项目，是部署的dist这个文件。
基于vue打包后字体和图片资源失效问题的解决方法
08-27
下面小编就为大家分享一篇基于vue打包后字体和图片资源失效问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
修改Vue打包后的默认文件名操作
11-20
因为我想在我的服务器上部署两个vue项目，但是vue打包后默认的项目名是dist，这样子就跟我上一个vue项目冲突了。因此查了一下资料。 二，解决方案 进入config ⇒ index.js，在build中将dist关键字改成其他名称即可。...
解决vue打包后刷新页面报错：Unexpected token <
10-16
主要介绍了解决vue打包后刷新页面报错：Unexpected token <相关知识点，需要的朋友们参考下。
vue 简单自动打包
fevan的专栏
09-18 526
小目标：每次 git 提交后，不用人工打包。暂定是 每3分钟自动执行一次 （crontab 部署）适用于研发测试服务器。正式环境 还是人工控制安全。
vue项目打包完成后自动化部署
qq_43347802的博客
03-03 991
每次打包都会执行npm run build 这个命令，这个脚本里有一个前置钩子(pre)和后置钩子(post)，分布运行与脚本运行前执行和运行后执行，比如你的打包命令是build，则后置钩子就是postbuild，当然你的打包命令也可以不为build，自定义的名称也可以，只要在前面加上post就是后置钩子；下面代码中的postbuild（&&代表继发执行，执行完前面再执行后面；首先你要有一台可ssh连接的服务器，填写好配置后更改你的服务器部署目录，我的目录如下图，记得替换代码中你的目录。
Vue打包并自动部署到指定服务器
一个懒惰前端的博客
04-13 345
Vue打包并自动部署到指定服务器
实战Vue打包并自动部署到指定服务器
MYuanFang的博客
10-17 1771
前端自动部署
vue前端，java后端打包脚本编写
weixin_45958605的博客
10-21 554
项目打包
vue 打包
05-26
Vue.js 项目的打包是将开发环境下的代码转换为可在生产环境下运行的静态文件的过程，其中包括 HTML、CSS、JavaScript 等文件，以及图片、字体等资源文件。下面是使用 Vue CLI 进行打包的步骤： 1. 在命令行界面进入项目根目录。 2. 运行以下命令安装依赖： ``` npm install ``` 3. 运行以下命令打包： ``` npm run build ``` 4. 打包完成后，会在项目根目录生成一个 `dist` 文件夹，里面包含了所有的静态文件和资源文件。 5. 将 `dist` 文件夹中的文件上传到服务器即可。 注意：在打包之前，可以修改 `vue.config.js` 文件中的配置项来进行自定义配置，如修改输出目录、设置 publicPath 等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值