前言：
这个教程是我自己摸索的，至于原理性东西，现在还在学nginx，后期会了再来完善！
开始配置项目之前，请确保你有一台服务器，学生初次购买的话，很便宜，一百多可以有一年的服务，阿里云或者腾讯云，百度云都可以，我是买腾讯云的。
实验配置：本地是windows10,前台用的是vue，后台用的是nodejs的框架express，数据库用的是mysql,服务器我的是学生服务器，很便宜100多，linux centos7,然后本次实验我用的是宝塔连接我的服务器，至于宝塔怎么连接，这个网上也有教程，初学者建议使用宝塔配置，宝塔配置过后，你会明白一些原理性的东西，后期你可以学学Linux操作系统的操作指令，用xShell远程连接服务器，再配置，这样的话，你思路就清晰了。
基于linux的万物皆文件，说一下进入某个文件的小技巧。
Linux下的进入某个目录是 cd /xxx/xxx,这个目录结构一般比较长，很容易输错，小技巧就是使用ftp连接你的服务器，然后它里面可以可视化你的文件，找到你的文件，然后选择复制路径，在xsell里面 cd /粘贴你复制的路径，这样你的速度又快，又准，哈哈。
---------------------------------------------------------------------------------------------------------------------------
开始正文：
1.服务器模块
以我的腾讯云为例：
上面可以看到，我已经申请了一台服务器，而且已经完成了备案，这些怎么购买的问题，网上有其它教程，我不赘述，至于备案的话，的确比较慢的，因为我是全程在网上备案的，加上是除夕那天买的，备案成功，好像一个月时间，中间腾讯客服小姐姐多次打电话给我，说我的网页不可以有其它商业标签，因为是个人网站的原因，企业网站才可以盈利。还有一次是，我把内容放在404页面了，因为我觉得我的项目不符合规定，索性让访客直接访问404页面，然后腾讯客服小姐姐又打电话给我，说我的网站找不到了，必须改回来，不然一星期后，就要关闭我的网站……所以我又修改了，说这些的目的是为了你购买服务器之后，个人项目放置的一些问题，一定要符合规定，避免一些不必要的麻烦。
再多说一点，可能你会有疑惑，说为什么有的个人网站，有的还有岛国等动作片，这些都没被禁掉，首先，你要明白，有的一些服务器是国外，或者香港澳门台湾这些的，国外服务器，以及我国的香港，澳门，台湾这些比较特殊的地区不需要备案，限制比较小，至于为什么你可以上网自己再搜索其它答案。
上面好像废话了，首先开始正文：
1.1给自己购买的域名配置二级域名，或者三级域名。
我的网址是：humianyuan.cn(这个是一级域名)，（www.humianyuan.cn）二级域名，这两个域名映射的都是我的静态项目，就是vue打包后的dist资源而已。
还有一个onepice.humianyuan.cn,它映射的是我的动态项目，就是有数据库操作的。(这个不知道应该属于二级域名，还是三级域名，如果你恰好知道规则，可以在评论区帮我解答一下，十分感谢。)
在搜索框输入：域名，然后点击我的域名管理
然后可以看见下面这个东西：点击下面的红色的划线部分，进行配置下级域名（因为不知道叫几级，统一称下级）
点击解析之后，你可以看到：如下界面，点击添加记录，给你的域名配置下级域名
然后把你的鼠标放到不同的输入框，它会有对应的一些配置的提示，例如下面我举俩个例子：
上面这些提示，应该可以说提示的很全面了，比如主机记录，就是填入你想要为你的域名配置的下级域名的别名.
打个比方，我的域名是humianyuan.cn,那么腾讯云自动帮我配置了，www.humianyuan.cn(下级域名)，
然后我再添加了一个，onepice.humianyuan.cn(下级域名)，这样我就多了一个下级域名，至于可以配置多少个，好像在哪里有说明，具体看不同服务器提供商可以帮你免费解析多少个子域名。
附上demo：
添加成功如下
演示我的输入操作：
这样你的下级域名就配置好了，一般你如果是刚开通服务器的话，要先把你的80端口打开，有的服务器提供商默认是没有开启的，至于怎么开启，是在控制台的安全按钮里面的安全组，点击安全组是一些默认帮你配置好的端口映射，怎么配置，也可自行百度。
这样，你的腾讯云自身携带的管理后台就配置好了。
接下来配置你的宝塔面板。
1.2宝塔面板：
1.2.1在搜索框搜索，并下载好下面的软件。
nginx用于代理映射，充当代理服务器，nginx可是牛逼的东西，配置虽然几步，但是里面的原理性东西可是很深的，它不但可以当代理服务器，还可以充当web服务器，还有邮件服务器等等……功能很强大，但是我的了解很少，就不吹了，
mysql是我用来放值我的数据库的。
pm2下载后，默认帮你配置好了node环境，还有npm，用于node扩展包的管理工具，你可以利用npm再连接淘宝的镜像地址，然后下载cnpm，用cnpm安装node扩展包速度很快，比较npm服务器在国外，cnpm是淘宝搭建的，所以感谢淘宝，感谢阿里。
下载好上面红色部分的软件后，你需要在pm2里面下载express框架，因为我node后台用的是它。只说它。
点击pm2的设置：
点击下面的模块管理，在搜索框搜索express，然后安装。
到这里，你的第三方软件下载完成。接下来是这些软件的配置的问题。
1.2.2端口配置：
放置你需要用的端口，例如我后台接口的端口号是3000，我索性把3000到3500一起放行，不过这里配置了，好像腾讯后台也没有放行，所以这里不配置应该没有关系，因为还需要在腾讯云后台再次配置，但是我的后端接口本身就放在我的本身服务器上，所以内部端口是默认全部放行的，此处的配置好像没有意义。不过如果你有一百台服务器的话，那么这里配置好，在腾讯云后台也要配置，不过如果你有一百台服务器，应该是看不到我这篇文章了，毕竟这个是小白看的。
1.2.3数据库配置
点击你的添加数据库，就可以配置数据库名称，密码了。
给个demo:
接下来讲一下，上传你的项目到服务器，再讲nginx，反向代理吧。
2.上传项目
2.1项目模块
首先上传项目之前首先，你要把你的vue,运行npm run build,进行打包，然后把打包结果生成的dist文件夹直接压缩，上传到宝塔。
点击文件，来到wwwroot的目录下：
可以看到，我下面的三个红线的文件夹，带有1的是我的前后端分离项目，带有2的是纯静态页面，不涉及数据库操作。
再来给你看看目录结构：
纯前端的目录结构：看了下面你就会知道，你上传的只有dist下面的内容，node_module是不用上传的，因为npm2已经自带它需要的环境配置了。
前后端分离项目：
*前端模块，把打包好的dist文件直接上传到这里就好。
*后端模块 ，把你的后端项目压缩后直接上传，丢到这里，node_module这些包我原本以为不需要的，但是后台需要，因为我上传了之后，把它删了，然后用xshell连接服务器的时候，进入这个目录，执行了npm install,它会自动根据package.json文件的依赖来下载依赖的node包，但是npm下载的时候失败了，可能是国外服务器连接到这里太远了，不稳定，所以我直接使用npm install -g cnpm --registry=https://registry.npm.taobao.org ，安装我的cnpm,然后用cnpm install安装好我的项目依赖，发现多了的node_module,所以应该说明你的后台用到的node扩展包不可以删除。
至于怎样上传，直接点击上传按钮就好了，其他的应该不能吧，好歹写过点程序……
3.接下来进行nginx的反向代理配置
直接粘贴配置信息再说明：在软件商店点击nginx的设置
然后弹出：
点击配置修改
蓝色部分是默认配置。
user www www; worker_processes auto; error_log /www/wwwlogs/nginx_error.log crit; pid /www/server/nginx/logs/nginx.pid; worker_rlimit_nofile 51200; events { use epoll; worker_connections 51200; multi_accept on; } http { include mime.types; #include luawaf.conf; include proxy.conf; default_type application/octet-stream; server_names_hash_bucket_size 512; client_header_buffer_size 32k; large_client_header_buffers 4 32k; client_max_body_size 50m; sendfile on; tcp_nopush on; keepalive_timeout 60; tcp_nodelay on; fastcgi_connect_timeout 300; fastcgi_send_timeout 300; fastcgi_read_timeout 300; fastcgi_buffer_size 64k; fastcgi_buffers 4 64k; fastcgi_busy_buffers_size 128k; fastcgi_temp_file_write_size 256k; fastcgi_intercept_errors on; gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.1; gzip_comp_level 2; gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; gzip_vary on; gzip_proxied expired no-cache no-store private auth; gzip_disable "MSIE [1-6]\."; limit_conn_zone $binary_remote_addr zone=perip:10m; limit_conn_zone $server_name zone=perserver:10m; server_tokens off; access_log off; server { listen 80;#监听外部端口 server_name humianyuan.cn;监请求的服务器名称，如果你只有ip地址，那就在这里写ip就好了，比如：198.121.2.2
root /www/wwwroot/humianyuan.cn; location / { try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404 index index.html index.htm; } #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件 #因此需要rewrite到index.html中，然后交给路由在处理请求资源 location @router { rewrite ^.*$ /index.html last; } index index.html index.htm index.php #error_page 404 /404.html; include enable-php.conf; location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; } location ~ .*\.(js|css)?$ { expires 12h; } location ~ /\. { deny all; } access_log /www/wwwlogs/access.log; } server { listen 80;#监听外部访问的端口 server_name onepice.humianyuan.cn; index index.html index.htm index.php; root /www/wwwroot/onepice/dist;#你的前端路径下index.html的根目录 location / { try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404 index index.html index.htm; } #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件 #因此需要rewrite到index.html中，然后交给路由在处理请求资源 location @router { rewrite ^.*$ /index.html last; } #/api_hu66 是你自己定义的接口名称，你后台自己定义的 location /api_hu66 { rewrite ^.+api/?(.*)$ /$1 break; proxy_pass http://127.0.0.1:3000; #node api server 即需要代理的IP地址 proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } #error_page 404 /404.html; include enable-php.conf; location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; } location ~ .*\.(js|css)?$ { expires 12h; } location ~ /\. { deny all; } access_log /www/wwwlogs/access.log; } include /www/server/panel/vhost/nginx/*.conf; }
上面这些配置就配置好了，同个访问端口，携带不同的服务器名称，映射到了不同的vue项目。
配置好上面这些，记得添加站点信息：
点击添加站点，按规则填写，这个就不教你了，留点给你思考的空间，授人以鱼不如授人以渔。
本篇简单教程完结，好了花了2个小时写的，6点到现在上网课的时间。