宝塔面板连接部署vue3+node.js+mysql

EARPHONE
2,668 阅读2分钟

宝塔面板连接部署vue3+node.js+mysql

一. 安装xshell 和宝塔面板以及用xshell连接腾讯云

安装xshell和宝塔面板，以及通过xshell连接腾讯云可以参考我这篇文章 xshell连接腾讯云轻量应用服务器，并用宝塔面板部署node.js接口 - 掘金 (juejin.cn)

在软件商店下载如下的软件：

image.png

二. 宝塔面板部署

1. 部署mysql，连接远程数据库

  1. 在数据库页面点击添加数据库

image.png

  1. 在Navicat中将waimai数据库转储为waimai.sql

image.png

image.png 如果出现错误：

[ERR] 1273 - Unknown collation: 'utf8mb4_0900_ai_ci'

报错原因： 生成转储文件的数据库版本为8.0,要导入sql文件的数据库版本为5.6,因为是高版本导入到低版本，引起1273错误

解决方法： 打开sql文件(可以vscode打开，然后全选替换)，将文件中的所有

  • utf8mb4_0900_ai_ci替换为utf8_general_ci
  • utf8mb4替换为utf8 保存后再次运行sql文件，运行成功
  1. 在宝塔面板中导入数据库

image.png

image.png

image.png

注：如果phpMyAdmin中waimai数据库为空，应该是数据库版本的问题，要将waimai.sql文件的内容进行替换，参考2的解决方法。

2. 部署用node.js写的后端接口

  1. 在wwwroot目录下新建文件夹，上传node.js文件

image.png

image.png

  1. 修改db目录下index.js文件中的user, password, database

image.png

image.png

image.png

image.png

  1. 在宝塔和腾讯云添加防火墙

image.png

  1. 用ApiPost测试node.js部署接口

image.png

3. 部署vue3

  1. 将vue文件打包为dist文件夹，在wwwroot下新建vue项目目录，将dist文件上传到vue项目目录中

image.png

  1. 在网站PHP项目中添加站点，部署vue项目

image.png

  1. 开放端口要注意在腾讯云服务器添加防火墙，以及在宝塔安全中系统防火墙开放端口规则

image.png

  1. 浏览器地址栏输入服务器公网：开放的端口（例如：http://114.132.65.145:81/）即可访问

image.png

avatar
文章
阅读
粉丝