使用宝塔面板摆设node项目、数据库及Vue项目

使用宝塔面板摆设node项目、数据库及Vue项目

1.前置准备

1.1数据库文件.sql文件

没有的可以从我这里下载sql文件:链接为https://pan.quark.cn/s/b3f87884d4a3，提取码：FtzN
1.2完整的node项目，能运行起来的

没有完整的可以参考我的，或者直接使用https://github.com/continye/serve_node下载后需要 (npm i) 下载依靠包 使用node app.js 运行，需要自己修改服务器连接，地址为app/config/config.prd.js而且app/config/config.dev.js里面修改自己的服务器
1.3完整的vue项目，能运行起来的

没有完整的可以使用我的，参考地址为：https://github.com/continye/vue_CMD-，(npm i) 下载依靠包，npm run dev 启动项目
1.4前置知识：知道怎么安装宝塔

不懂怎么在服务器上安装宝塔的可以看这篇文章
2.使用宝塔新建数据库

2.1打开宝塔面板数据库

2.2添加数据库

   数据库名称可以任意写，用户名也可以任意写
    注意这里的访问权限要打开，不然你本地去连线上数据库时连不上
  这里创建的数据库要与node项目中连接的数据库保持一致

2.3如果你自己的sql文件过大，大于50mb的话，需要设置php，否则导入不成功

到软件商店里去搜刮php，你安装的php，点开设置

从这里面可以设置最大上限

重启php

2.4d.导入.sql文件

点击管理，使用phpMyAdmin导入

导入你的sql文件

最后检察是否导入成功，看数据库是否有导进来的表
使用Navicat 数据库，连接你创建的数据库，从Navicat 进行导入

先要进行开放端口，如果不开放的话，不允许访问此数据库

   安全里面添加端口规则，数据库默认端口就是为3306
  

   阿里云服务器也要开放端口3306，你在哪里买的服务器，就从哪里打开端口3306
  

   开启完成后，打开Navicat 数据库或者你们自己使用的数据库，使用mysql
  

连接名可以任意写，主机填写你的服务器地址不需要带端口和http开头，端口填写你刚刚开放的3306，用户名默认是root，暗码为宝塔数据库里面的root暗码

记得修改node项目中，链接服务器地址，要和你创建的数据库保持一致，这里的ip地址不要带有http!!!
运行node项目，能正常访问就阐明我们线上的数据库摆设成功了！

3.摆设node项目

起首需要一个完整的node项目，能运行起来的，数据库链接为刚刚创建的数据库，上面刚刚说了，没有node项目，最上面我发了一个完整的node项目，下载下来直接修改连接的数据库就可以了，数据库的表也必须要导入到创建的数据库里面。
3.1新建文件夹node，然后不需要打包，直接删除依靠包放在node项目下

这个就是我的node包serve直接放进去

不消打包直接上传就可以了，下面是serve里面的东西，node包里面模块

3.2开启宝塔面板里面的node服务

打开node项目，如果第一次打开会提醒你未安装node版本管理器，你跟着安装一下就行，然后跟着以上步调安装你node项目对应的是什么版本，然后进行安装node，同时它也会自动安装pm2。
3.3将我们的node项目添加至node服务中

   项目目录：选择刚才你导入node包的文件，我刚刚的是serve
    项目名称和启动选项：会在你选了项目目录之后自动带入进去，
  启动选项会自动天生你在package.json里面配置的什么，也可以自定义，我这里使用自定义，使用node app.js 去启动项目
    项目端标语：很重要，这个要与你node项目中配置的端标语一致！！！背面去访问接口也是使用这个端标语！！
这个项目端标语可以任意填，但是肯定要与node项目中配置的端标语一致，而且与vue项目中axios中访问后端地址的端口base_url（项目基地址）的端标语一致，而且整个vue项目中的地址，你都是使用的base_url变量，而不是写死的常量。有一个不一致，都会导致网络请求错误。
（下图是我的node项目中的端标语，没写8080是因为我这个服务器的8080端口已经被另一个项目使用了，肯定要注意不要和前端项目使用同一个端口，会导致端口占用！！！）
  

vue连接地址也需要修改

3.4开放接口端口

开放接口端口就是你填的项目端口，如今需要使用他，也就需要开放

不但宝塔面板需要开放，你在哪里购买的服务器，也需要在服务器里面打开
3.5测试项目接口

使用的是在线的postman测试，接口测试的没问题，那么阐明我们的node项目已经在服务器上跑起来了，
如果没有成功，可以看一下日志，是什么没有运行起来

4.摆设Vue项目

起首也要先有一个完成而且能运行的vue项目，我上面提供了，可直接下载，vue项目端标语必须和你刚刚写的项目端口一致，那么才会访问到

   使用 npm run build直接进行打包，最后天生打包文件dist
  

4.1到宝塔面板的网站中创建站点

   填写你的域名，需要摆设到那个域名上，没有域名服务器ip地址也可以
    根目录就是导入的文件
  4.2把打包好的vue项目文件上传到上面一步天生的目录中

里面会默认自带几个页面，不消管直接导入dist文件

然后这里直接选择你导入的vue文件，也可以直接修改域名在域名管理里面

4.3开放端口

注意：要同时开放宝塔面板的防火墙端口和你购买服务器的安全组端口，我这里就演示宝塔安全端口。

4.4查抄前端项目是否摆设上去

在浏览器中输入刚才填写的真正域名http://103.40.14.112:51585/,访问成功阐明已经成功摆设上去了。

到此，你的项目已经全部摆设到服务器中了，你就可以把你的网站发给别人进行浏览了

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。