前端常用VUE打包相关命令（SVN、NPM相关）

写在前面

前段时间因为一些变故和个人原因，久久没有更新博客，现在工作之余有了些许闲暇，又加上想与大家分享一些经验，故又开始不定期更新博客，感谢那些关注我的朋友，同时希望自己的文章和经验能帮助到大家。

目的

作为回归博客的第一篇，其实一开始是没想好写什么的，但结合自己近段时间常做的内容，感觉与VUE打包相关命令会常用到，而且对于做前端的人能秒懂并直接用，很多时候不会仅仅是因为不知道命令应该输什么，所以写了本篇文章，希望能有所帮助。

常用SVN指令

因为公司有保密需求所以使用的是SVN传输，故在此写一些常用的SVN指令，以后更新可能会有其他GIT等内容指令介绍：

开发最常用到的相关指令：
1、检出：svn checkout/svn co
用法：
svn checkout http://路径(目录或文件的全路径)　[本地目录全路径] --username　用户名 --password 密码
svn checkout svn://路径(目录或文件的全路径)　[本地目录全路径] --username　用户名 --password 密码
svn co同上，如果不带–password 参数传输密码的话，会提示输入密码，建议不要用明文的–password 选项。其中 username 与 password前是两个短线，不是一个。
结合实际，很多使用SVN来传输的，使用的都是内部局域网络，对此你的电脑IP就已经相当于身份认证，不需要输入什么username和password，仅仅需要svn checkout 路径地址即可
个人总结：与导出不同的是，开发更多用到的检出，因为我们开发需要进行更新update、提交commit等操作，所以检出算是开发最常用的几个SVN命令之一，通俗点讲就是下一份代码到本地，好让你能修改和提交项目。

2、提交：svn　commit/svn ci
用法：
svn　commit　-m　“备注文本“　[-N]　[–no-unlock]　文件名
svn ci 同；
文件名用*表示全部文件，实际在应用的时候，因为本地文件配置与服务器配置经常有所区别，我们很少会将全部本地代码提交，所以使用commit时写上我们需要提交的文件名更多些；需要锁时（锁后文件只有锁定文件的用户能解锁）加上–no-unlock。
个人总结：在使用commit时要注意不要将一些用于本地开发的配置覆盖服务器配置，会导致服务器引起不必要的错误。

3、提交：svn　update/svn up
用法：
svn　update （默认将更新当前目录以及子目录下的所有文件）
svn　update　-r　修正版本　文件名 (更新到具体某个版本）
svn　update　文件名 （更新某个文件）
svn up 同；
更新操作算是SVN最常用的操作之一了，update可以从服务器上下载最新的内容并更新本地的代码，基本在开发前和提交前都需要进行次操作。
个人总结：在使用update时，如果更新时最新版本更新的文件中有与本地自己更改内容有冲突部分时，需要先将冲突解决才能提交。冲突的解决详细介绍可以去看看这篇文章SVN解决冲突方法，实际在操作时，可以对比自己的版本与服务器最新版本有何不同，然后使用resolved清除冲突即可

4、添加：svn add
用法：
svn　add　文件名
仅仅使用svn add添加文件还不行，还要用svn commint -m将文件上传才行
个人总结：顾名思义，就是新增文件或内容，然后通过commit实际上传，这样服务器端就会进行相应的配置更新。

5、删除：svn　delete
用法：
svn://路径(目录或文件的全路径) -m “删除备注信息文本”
个人总结：有增就有减呗，这个就是用来删除，同时不要忘记提交来使服务器端实际删除

6、恢复：svn　revert
用法：
svn　revert　[–recursive]　文件名
个人总结：这个操作冲用于冲突时，我们使用服务器端的代码来覆盖我们本地的内容来解决冲突

以上就是前端最常用的几个SVN命令，还有很多SVN命令，像svn diff（比较）　svn log（查看日志）　等等，网上有更详细介绍的，我这里只写了几种前端最常用的几个，想学习更多可以去菜鸟SVN教程或者SVN官网学习。实际在操作时，现在的编辑器大多都支持SVN和SVN操作，同时这些操作在编辑器中也有专门的按钮和简化操作，十分人性化，使用过几回就会熟练应用而不用命令行手输命令来执行。

常用NPM指令

1、查看版本：npm -v
用法：
npm -v
个人总结：这个看版本不止npm可以这么用，其他需要看版本的也可以用-v指令，不多说。

2、初始化：npm init
用法：
npm init 输入会要填一些配置信息，依次是
package name: 项目名
version: 版本号
description: 对项目的描述
entry point: 项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
test command: 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
git repository: 如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地址了）
keywords： 项目关键字
author: 作者的名字
license: 发行项目需要的证书
如果第一次搞不太清楚就一直回车或者一开始就使用npm init -y好了
个人总结：初始化后在当前目录生成一个package.json，这是一个json文件，里面是项目的各种插件和版本，需要增加插件时可以直接在这个文件中加入然后使用npm install下载即可

3、下载：npm install/npm i
用法：
npm install 包名称
后面如果没有需要下载的包名称时，会根据当前目录下的package.json中的配置来下载所有插件内容并覆盖安装。
个人总结：下载安装应该都用过，一般平时在用的话都会通过package.json来调整版本，下载下来的插件会安装到node_modules目录中。

4、删除：npm uninstall
用法：
npm uninstall 包名称
看名称就知道，这个命令与install下载安装刚好相反，会删除对应名称依赖，对应插件会在node_modules内移除，同时package.json的dependencies内对应的依赖也会移除。
个人总结：删除的话常用于优化升级，比如某些插件项目一开始是有用的，随着内容不断更新换代，某些插件用不到了，如果不去删除插件和依赖，它仍旧会存在且有效，这样就使得整个项目变得臃肿不堪而且性能下降，所以删除操作对于性能优化还是很有必要的。

5、更新：npm -update
用法：
npm update 插件名称 （更新插件到最新版本）
npm update 插件名称@版本（更新插件到指定版本）
这个命令行的作用一目了然，更新插件到指定版本或者最新版本，不多做介绍。
个人总结：需要更新到指定版本的时候，也可以直接更改package.json文件中的依赖来达到同样效果。

剩下其他的npm内容可以去NPM使用介绍查看，里面有较为详细的讲解。

vue-cli 工程常用的 npm 命令

1、下载：npm install
用法：
npm install 包名称
个人总结：这个在前面的npm相关命令中已经有所介绍，作用就是会根据package.json文件中的依赖来下载安装资源包到 node_modules 文件目录，因为插件实体一般比较大，如果服务器上连node_modules里面的插件实体内容都上传的话，即会大量占用服务器的储存容量，在下载的时候又会花费更多时间和流量，所以实际应用中node_modules中的内容都是不会去上传的，而会将其配置通过package.json来表现，下载时只需要下载其他内容，然后根据package.json的依赖来下载插件内容就行了。

2、启动项目：npm run dev
用法：
npm run dev
其中，这个dev可以自行设定，具体配置也在package.json文件中，找到里面的scripts,一般来说会包含有以下几个内容：

"scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

其中，vue-cli-service serve 表示启动项目，它的key值在上图中时dev，所以这里是用常规的npm run dev启动项目，它的底层配置内容一般是这样的：

Usage: vue-cli-service serve [options]
Options:
  --open    服务器启动时打开浏览器
  --copy    将URL复制到服务器启动时的剪贴板 (直接到浏览器去粘贴就OK了 http://localhost:8080/)
  --mode    指定环境模式 (默认: development)
  --host    host 地址 (default: 0.0.0.0)
  --port    端口号 (default: 8080)
  --https   使用https (default: false)

VUE2.0中此默认值是dev，到了VUE3.0此默认值改为了serve，此时我们需要使用npm run serve来启动项目，这个key值也可以自定义，所以当看到某些VUE项目既不是使用npm run serve也不是使用npm run dev来启动时，那一般就是他自定义了scripts中的脚本指令；

3、打包项目：npm run build
用法：
npm run build
vue-cli-service build同理key值也可以自定义，他表示进行项目自动打包。不同于一般的不用框架的项目，vue项目中大量存在vue文件，还有一些json,js等文件，几乎没有html文件，vue文件浏览器时无法直接像识别html文件一样直接读取，这就需要将vue项目的文件全部打包成相应的js,css等浏览器可以识别的文件格式，所以必须要进行项目打包，它的底层配置内容一般是这样的：

Usage: vue-cli-service build [options] [entry|pattern]
Options:
  --mode        指定环境模式 (default: production)
  --dest        指定输出目录 (default: dist)
  --modern      构建两个版本的 js 包：一个面向支持现代浏览器的原生 ES2015+ 包，以及一个针对其他旧浏览器的包。
  --target      允许您以项目库或Web组件的形式在项目内部构建任何组件 app | lib | wc | wc-async (default: app) ???
  --name        lib或者web组件库的名称 (default: "name" in package.json or entry filename)
  --no-clean    在构建项目之前不要删除输出目录(dist)
  --report      生成report.html以帮助分析包内容
  --report-json 生成report.json来帮助分析包内容
  --watch       监听 - 当有改变时 自动重新打包~

vue-cil打包的本质是webpack打包，只不过他设定好了一些webpack打包的配置，可以使用vue-cli-service inspect来检查Vue CLI项目中的webpack配置。有关更多详细信息，请参阅检查webpack配置，想了解更多关于webpack内容的，可以参阅webpack官网。

vue-cli-service lint本人没怎么用到过也不太清楚，就不瞎介绍了。
个人总结：一般来说前端开发很少会去改vue-cil中webpack的底层配置，更多时候我们需要配置的vue.config.js中的内容，配置vue.config.js中的内容可以参阅vue-cli 3.0 vue.config.js配置

4、下载：npm run build--repor
用法：
npm run build–repor
用于查看 vue-cli 生产环境部署资源文件大小的 npm命令
个人总结：查看资源大小，好像没啥好总结的。

其他前端常用相关命令

1、压缩：tar zcvf
用法：
tar zcvf 需要压缩的文件名
例子：
tar zcvf dist.tar.gz dist
前面介绍了可以通过npm run build进行打包，这时候默认的我们可以在当前目录中得到一个dist文件夹，里面有通过vue脚手架打包好的内容，而在传输时候，我我们很多时候需要传输的时压缩包，这其他也受某些工具并不支持传整个文件夹的影响，所以实际中我们常常会将dist文件压缩，该行指令起的就是这个作用，运行例子中的命令我们可以得到dist.tar.gz的一个压缩包。

2、远程拷贝：scp
用法：
scp 文件名_username@地址路径
例子：
scp dist.tar.gz a@192.168.0.1:/root
scp是secure copy的简写，用于在Linux下进行远程拷贝文件的命令， scp传输是加密的,可能会稍微影响一下速度。另外，scp还非常不占资源，不会提高多少系统负荷，在这一点上，rsync就远远不及它了。虽然 rsync比scp会快一点，但当小文件众多的情况下，rsync会导致硬盘I/O非常高，而scp基本不影响系统正常使用;例子中的命令作用是a用户将我们前面通过tar zcvf dist.tar.gz dist得到的压缩包发送到了指定地址（192.168.0.1的root目录下）

3、解压：tar zxvf
用法：
tar zxvf 文件名_指定目录
例子：
tar zxvf dist.tar.gz -C /var/www/
有压缩肯定有解压，作用不多说了，例子中命令的意思是将 dist.tar.gz解压到C盘的/var/www/目录下。

4、列表/长列表：ls/ls -l
用法：
ls/ls -l
ls其实就是list的简写，通过此命令我们可以得到当前终端中所有的文件列表，ls -l中的-l表示长列表,-l对应long,很好理解。这里为什么要写这个，因为当我们解压和压缩文件时需要文件名称，通过列表可以直接复制名称，十分简便，而长列表中包含文件最后修改时间，文件大小等信息，通过文件最后时间我们可以确定该文件是否是刚更新的，可以规避一些覆盖压缩、解压等操作时的错误（看是否覆盖成功等）
其余一些常用的linux指令我们可以查阅菜鸟Linux 命令大全

归纳一下，我们在整个项目过程中有如下内容：
1、本地安装相应的基础项目依赖，像vue-cil,npm等
2、通过svn checkout或其他版本管理工具（如git）下载服务器端的代码
3、通过svn commit、svn add、svn delete等操作修改提交我们的代码到服务器。
4、本地版本更新（本地版本与开发版本要做区分）：svn update，一般来说我们需要将打包的版本额外建立一个文件夹，以防止打包时将一些本地配置打包上传
5、dist生成：npm run build
6、压缩打包：tar zcvf dist.tar.gz dist/
7、上传至目标服务器的某目录下（这里用root举例，会需要该服务器管理员密码）：scp dist.tar.gz root@192.168.0.1:/root
8、远程至服务器，解压至目标路径（远程也需要服务器管理员密码，不同的公司和局域网布局会有不同的远程方式，当然要是不需要你远程解压的话以下内容就请忽略）;tar zxvf dist.tar.gz -C /var/www/
9、远程解压以后，根据不同的项目实现方式会有不同的脚本命令，这个问下后台就可以知道，常见的nginx代理的话我们可以输入systemctl restart nginx来重启前端页面内容；也有会需要你查询某个进程号然后将其关闭重启的操作，查询某个程序或脚本的进程号代码如下(这以查询一个叫abc的进程为例;ps aux | grep abc),通过查询我们一般可以得到两行一行，仔细观察其中一行内容的就是刚刚发生的，它表示我们查询abc进程这个操作，还有个就是正则运行的abc进程，第一个内容为用户，第二个就是进程号，我们直接用kill 进程号’杀死‘即可，这里可能涉及到使用kill -9和kill -15，两者的区别可以参阅kill -9和kill -15的区别。
希望以上写的内容能帮到大家。