【云服务器】项目部署—搭建网站—vue电商后台管理系统_workbench 搭建网站

如何将vue电商后台管理系统项目部署上线？

需要使用到的软件：
Xshell和postman

首先要购买一个云服务器

1. 用workbench或xshell连接服务器，并在服务器里安装可视化面板，可以选择自己喜欢的安装方式。

2. 登录进BT面板：

3. 一键安装nginx，mysql，php等套件

4. 先在侧边栏数据库中，创建一个数据库，建议把数据库名、用户名和密码都改成mydb，然后导入数据，把之前做项目的数据库导入进去(mydb.sql)
   

5. 在侧边栏安全中，开放8889(网站)和3306(数据库)端口
   

6. 在/www/wwwroot路径下上传(压缩再上传)服务器文件(vue_api_server)，解压到当前目录。
   

7. 在vue_api_server中的config文件夹里面修改default.json配置(双击进入编辑模式)，ip地址改成服务器的ip地址，端口号改成8889
   

8. 再在vue_api_server的app.js里面的端口号改成8889
   

9. 在侧边栏软件商店下载pm2管理器，打开pm2管理器，选择vue_api_server服务器文件，启动app.js文件
   

10. 用postman测试，复制api接口文档里的接口地址，将ip地址修改为服务器的ip地址，端口号为8889，底部有数据表示服务器设置成功！
    

11. 在vscode中，修改main-prod.js中的接口地址，然后重新打包(npm run build)
    

12. 将vue_shop里的dist文件压缩

13. 在侧边栏网站里添加一个站点，将服务器ip地址(http://xx.xxx.xxx.xxx)当做域名，然后可以通过这个ip地址访问网站(添加完站点后会自动生成一个http文件)
    

14. 在文件里找到http目录(/www/wwwroot/http)，把目录下的文件都删除，把dist压缩包上传并解压，并把dist里面的文件全部剪切到http根目录下，这样网站就搭建好了！
    

最后一步!!!

最后一步!!!

最后一步!!!

最后一步!!!

打开chrome，在新标签页的地址栏，键入自己的服务器IP，enter回车，即可看到自己的项目~