起因
自己只会写html和简单的php页面，对于Laravel、ThinkPHP、Vue.js这类php框架完全搞不懂（主要是中文文档太散了，而且内容很空，没有框架经验真的不好入门）。
有天晚上想着查查pjax和ajax是个啥东西，然后一查，好家伙，这玩意也太牛逼了，直接让网页的视觉交互上升了一个档次。但是网上关于这俩的中文文章又都是这么几份，复制来复制去的，没有适合入门的，于是就放弃了。（菜）
不过想着要不直接研究一下被吹得飞起的vue，可能说不定就悟了呢？于是就找了个Creative Tim大佬的Vuetify.js实现的后台模板 Vuetify Material Dashboard。
经过
网上关于如何让宝塔和Vue共存的文章又是寥寥无几（可能是前端的程序员不兴写笔记这一套？）然后想着要不试试Docker里跑Vue把机器环境隔离开来，这样子就不会存在端口冲突啥的问题了。（其实我连Docker怎么用也不太清楚，只知道这玩意是个牛逼哄哄的虚拟机）
新建网站
在宝塔网站管理中新建个网站，绑定一下需要反代的那个域名或者IP（不太推荐IP，因为用IP的话还不如IP+端口直接访问来的快）。
安装宝塔插件 Docker管理器
这个就去宝塔的软件商店里安装就行了，反正傻瓜式的，没什么好说的。
选择合适的镜像
众所周知，虚拟机都需要镜像才能运行虚拟系统，所以Docker也需要选择合适的虚拟镜像来运行Vue。
我第一次选的是nignx的镜像，因为网上关键词为宝塔、Vue、Docker的文章都说要用这个（也可能是我理解错了）。
我装上去之后，建了个容器发现node.js还要自己装，自己装了之后又是各种版本冲突，直接裂开...
第二次我选择直接用node的镜像，这回上去node.js有了，npm也可以直接跑，舒服了。
创建Docker容器
如上图所示，镜像选择node，IP的话不用管，反正是内网的Docker容器，转外网用nginx反代就行。
端口映射是重点，容器端口指Docker容器内部运行程序的端口，比如我选的这个 Vuetify Material Dashboard 的http服务用了8080端口，那么这里就填8080。然后是服务器端口，指的是需要映射到宝塔环境的服务器中的端口，即：在宝塔安全中开放了这个端口的话，那么在外网访问这个服务器端口，就等同于访问到Docker容器内的8080端口，这里我们填大端口号，因为小端口号一般都有程序占了，这里注意千万别按照自己的理解填成80或者443，不然会和nginx服务冲突。这里我填的是40001，应该是没有知名程序占用了这个端口的，后面还需要其他容器的话，也可以40002、40003这样接下去。
目录映射是可选项，如果喜欢在宝塔环境中编辑vue项目，那就开目录映射，如果不需要的话，可以跳过这一步。容器目录是指Docker容器内部的文件目录，我一般比较喜欢存在\home里，因为这个分区基本上没程序乱放东西，很干净，自己的文件很好找，所以填\home的下级目录，我这里是\home\vmd。服务器目录的话，因为等一下需要和域名对接，所以宝塔会在新建域名网站的时候，新建个文件夹，正好可以充分利用一下这个文件夹，所以这里我们就填这个文件夹\www\wwwroot\example，之后把vue项目文件都放在网站的这个目录就行，几乎就等同于正常的部署网站了。
端口映射和目录映射填好后记得点加号，不然是白忙活。
环境变量的话，如果你的vue项目用不到就可以不用。
内存配额这个由于我对vue的硬件需求不太了解，先填个512试试，应该是够用的。CPU权重一般100即可。
执行命令这个选项似乎是用于容器开机自启时执行的，我还没搞明白vue的启动机制，就先不填了。（了解的可以填一下，理论上是需要填个vue启动命令的）
最后创建就行。
部署vue项目
我因为设置了目录映射，所以直接在主机ssh中把项目git clone到网站目录了。
去容器中，进入你项目的目录，如果有网站映射那就是映射的那个目录。
运行npm install命令，安装一下项目所需的npm各种环境包，如果有报错的话，自行解决。
运行npm run dev，然后等个几分钟你的项目就成功跑起来了。（不知道为啥是dev，反正我对vue根本不了解，这条命令应该不唯一）
设置nginx反代
在宝塔的网站管理中，创建反向代理，代理名称随便填，目标URL填写http://127.0.0.1:+你映射出来的那个端口，其他保持默认。
结果
测试网站能否正常访问
直接访问你网站绑定的域名，理论上已经可以正常访问了。
如果不能访问，可以试试看在宝塔安全中，开启你映射的端口，然后通过IP+端口的形式访问，如果这回能访问那么就是反向代理设置问题，请自行解决。如果依旧不能访问，那么就是npm没run成功或者项目本身的问题，请自行解决。
正常情况并不需要在宝塔安全中添加任何端口。