vue——如何将vue h5项目部署到CentOs CVM上

一、购买腾讯云服务器:

进入腾讯云官网,购买云服务器校园优惠套餐
(镜像选择centos,即一种linux云服务器镜像)
腾讯云官网.

二、登录云服务器、安装相关软件:

查看腾讯云官方文档,按照流程:
2.1、在 Windows 系统的本地电脑中使用远程登录软件PuTTY登录 Linux 云服务器(PuTTY方式)
腾讯云官网文档——PuTTY登录.

2.2、安装ngnix代理服务器到Linux云服务器上
ngnix安装教程1.
ngnix安装教程2.

2.3、通过 Filezilla 实现本地 Windows 上传文件到 Linux 服务器/从 Linux 服务器下载文件(FileZille方式)
腾讯云官网文档——FileZille连接CVM上传/下载.

三、打包vue项目,并将打包好的vue的dist文件夹利用FileZille上传到云服务上

(注意打包后的vue的dist文件夹不要放在root目录下,一般是放在 /var/www/html/ 目录下,表示前端静态文件)
打包vue项目教程.

四、打开PuTTY,为要上传的vue项目配置相关的ngnix配置文件

并将dist文件读写权限设置成755,root目录下不好设置755,所以前面才提到dist文件夹不要放在root目录下(具体操作详细可以查看Linux命令行操作)

五、解决跨域问题(设置一个中间层转发一下api请求)
server {
    listen       80;     # 监听80端口,可以改成其他端口,但得确保云服务器有开放该端口号;可以腾讯云官网新建安全组创建云服务器端口https://console.cloud.tencent.com/cvm/securitygroup
    server_name  localhost/127.0.0.1/www.a.com(域名);     # 指向当前云服务器

	# 访问/根目录时
    location / {
        proxy_pass http://www.a.com:81;
        proxy_redirect default;
    }

	### 解决跨域问题:###
    # 添加访问目录为/api的代理配置
    # 目录为/api开头的请求将被转发到http://www.b.com/...
    location /apis {
        rewrite  ^/api/(.*)$ /$1 break;
        proxy_pass   http://www.b.com;
    }

解决跨域问题教程1.
解决跨域问题教程2.

写在最后

本文为自己学习过程中的思路整理,如有错误或不足,欢迎批评指正

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值