前端部署vue项目到腾讯云服务器

先把dist包上传服务器
可以使用宝塔、FileZilla、手动上传等等方式
手动上传方式

  1. 已有腾讯云服务器之后进入面板界面
    在这里插入图片描述

然后安装Nginx

请一步一步,紧跟步骤

  • 第一步

    安装gcc-c++ 编译器。nginx依赖的 pcre 和 zlib 包
    yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

  • ok没问题 第二步

    指令下载文件
    wget http://nginx.org/download/nginx-1.18.0.tar.gz

     解压文件
     tar -zxvf nginx-1.18.0.tar.gz
     
     解压之后把nginx-1.18.0文件手动移动到
     /usr/local目录中
     
     进入安装目录
     cd /usr/local/nginx-1.18.0
    

    进入目录之后 输入 ./configure
    make && make install 编译并安装 会生成一个nginx文件在同级
    cd /usr/local/nginx/sbin 进入目录
    sudo ./nginx 启动测试
    输入服务器地址,访问成功在这里插入图片描述

  1. 安装完成后进入nginx目录下的conf文件中 nginx.conf文件
  1. server可以当做是单独的一个vue项目配置
    主要配置端口号 文件目录
  server {
          listen       8080;//端口号
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /root/gitee_go/deploy/dist;//文件目录
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

若果需要是不同端口不同项目直接复制serve放至下边只需修改端口号、dist文件位置即可
ps 每次修改nginx.conf文件后都需要重启服务
先进入nginx下的sbin文件夹中 例如 cd local/nginx/sbin
重启指令 ==> sudo ./nginx -s reload

last.
进入服务器界面、选择防火墙
端口
添加对应端口号即可成功访问
在这里插入图片描述
访问也有几率403
在这里插入图片描述
在conf文件中添加user root即可
在这里插入图片描述
ps 有时候服务器重启服务起不来报错 nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)
输入 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 指定目录后再重启nginx即可

============

存放静态资源文件至服务器

conf文件中再新建一个server

 # 资源文件
    server {
        listen       35;     端口
        server_name  localhost;
        # 存放文件的目录
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /root/gitee_go/deploy;     对应的资源文件夹
            # index  index.html index.htm;
            autoindex on;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

配置完之后重启服务即可访问
例如

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
"童心党史小程序"是一个旨在教育和传承中国共产党历史的移动应用程序。它通过互动的方式,让用户特别是年轻一代能够更加生动和直观地了解中国共产党的历史。以下是对该项目的技术概览和功能介绍: 技术概览: 前端开发:小程序可能使用了微信官方提供的开发框架(如微信小程序原生框架、WePY、Taro等),或者是其他小程序开发框架,如uni-app,来进行界面的布局和交互设计。 后端服务:可能采用了Node.js、Python Flask、Django或者其他服务器端技术来搭建API服务,处理数据存取、用户管理等功能。 数据库:根据需求可能使用了MySQL、MongoDB、SQLite等数据库技术来存储历史资料、用户信息等数据。 云服务:可能使用了云服务平台(如腾讯云、阿里云)来部署后端服务和数据库,确保应用的稳定性和可扩展性。 安全性:应用可能包含了HTTPS加密通信、数据加密存储、用户身份验证等安全措施,以保护用户数据和应用的安全。 功能介绍: 历史时间线:用户可以通过时间线界面浏览不同时期的重要历史事件,了解党的发展历程。 互动学习:可能包括党史知识问答、小游戏等形式,让用户在互动中学习党史知识。 视频教学:提供历史事件的纪录片或相关视频资料,帮助用户更直观地理解历史内容。 文章阅读:收录了党史教育的文章、文献,供用户阅读学习。 个人中心:用户可以在这里查看自己的学习进度、收藏的内容等个人信息。 社交分享:允许用户将学到的知识或者感兴趣的内容通过社交媒体分享给朋友或家人。 离线资源:可能提供了离线下载功能,让用户在没有网络的情况下也能继续学习和浏览。 多语言支持:可能支持多种语言,以满足不同地区用户的需求。 综上所述,"童心党史小程序"结合了现代移动互联网技术,提供了一个内容丰富、形式多样、易于使用的党史学习平台,旨在促进用户特别是青少年对中国共产党历史的了解和兴趣。
该资源是一个基于SpringBoot、微信小程序和Vue技术栈的毕设项目,名为“小演员招募小程序”的设计与开发。该项目旨在为用户提供一个便捷的平台,用于招募和筛选合适的小演员。项目采用了前后端分离的设计思路,后端使用SpringBoot框架搭建,前端则采用微信小程序和Vue技术进行开发。 主要功能如下: 1. 用户注册与登录:用户可以在小程序中注册并登录,以便使用更多的功能。 2. 演员信息管理:用户可以查看和管理自己的个人信息,包括基本信息、演艺经历、才艺展示等。 3. 招募信息发布:用户(主要是剧组或导演)可以发布招募信息,包括角色要求、拍摄地点、薪酬待遇等。 4. 报名参与:感兴趣的小演员可以报名参加招募,提交个人资料供剧组筛选。 5. 筛选与通知:剧组可以在后台筛选报名的小演员,并对合适的演员发送面试通知。 6. 评价与反馈:剧组可以对合作过的小演员进行评价,同时小演员也可以对剧组进行评价,以便其他用户参考。 技术方面,该项目采用了以下技术: 1. SpringBoot:作为后端框架,负责处理业务逻辑、数据存储和接口提供。 2. 微信小程序:作为前端展示层,用户可以通过微信扫描二维码或搜索小程序名称来使用该平台。 3. Vue:作为前端开发框架,用于构建用户界面和实现交互效果。 4. 数据库:使用MySQL或其他关系型数据库存储用户数据、招募信息等。 5. 服务器部署在云服务器上,如阿里云、腾讯云等。 通过这些技术的整合,实现了一个功能完善、操作简便的小演员招募小程序,为剧组和小演员提供了一个便捷的沟通平台。
校园二手交易平台小程序是一个基于微信小程序框架开发的应用程序,旨在为在校学生提供一个便捷、安全的物品交易环境。该平台通过微信小程序的形式,使得用户无需下载安装额外的应用即可直接在微信内进行使用,极大地方便了用户操作。 技术栈方面,该小程序可能采用了以下技术: 微信小程序框架:使用微信官方提供的开发框架,支持前端的界面展示和交互逻辑。 云开发或服务器后端:可能使用了微信云开发能力,免去了搭建后端服务器的繁琐工作,也可以是传统的服务器后端技术如Node.js、Java等。 数据库服务:存储用户信息、商品信息、交易记录等数据,可能使用了云数据库如阿里云RDS、腾讯云数据库等。 支付接口:整合微信支付,实现在线交易的支付功能。 身份认证:利用微信的用户身份认证体系,确保用户身份的真实性和安全性。 消息通知:通过微信模板消息或服务通知,实时提醒用户交易状态和系统通知。 图片上传与处理:允许用户上传商品图片,并提供图片压缩和优化的功能。 搜索与筛选:提供商品搜索功能,以及根据类别、价格、新旧程度等筛选条件。 评论与评价系统:用户可以对交易的商品和卖家进行评价,增加交易的透明度。 安全机制:包括数据加密、接口权限控制等,确保平台的数据安全和用户隐私保护。 功能方面,校园二手交易平台小程序可能包含以下特点: 用户注册与登录:通过微信一键登录,简化注册流程。 商品发布:允许用户上传商品信息,包括图片、描述、价格等。 商品浏览:用户可以查看不同商品的详细信息,包括卖家信息。 搜索和筛选:用户可以根据关键词或分类筛选想要的商品。 交易沟通:提供内置聊天功能,买卖双方可以直接沟通。 购买与支付:用户可以选择商品进行购买,并通过微信支付完成交易。 订单管理:用户可以查看自己的购买记录和销售记录。 用户评价:交易完成后,买卖双方可以相互评价,形成信用体系。 综上所述,校园二手交易平台小程序结合了微信小程序的便捷性和丰富的技术栈,为用户提供了一个全面、高效、安全的二手交易环境。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值