如何使用Nginx将前端Vue项目部署到云服务器

apt-get install nginx

root@iZbp1e23w2p1t5zrsvqb63Z:~# nginx -v
nginx version: nginx/1.18.0 (Ubuntu)

root@iZbp1e23w2p1t5zrsvqb63Z:~# nginx
root@iZbp1e23w2p1t5zrsvqb63Z:~# 

npm run build
# 具体是否为build命令需查看项目目录下的package.json文件（一般都是辣）

root@iZbp1e23w2p1t5zrsvqb63Z:~#nginx -s stop
root@iZbp1e23w2p1t5zrsvqb63Z:~# 

nginx -t

vim /etc/nginx/nginx.conf

http { 
    #前面扒拉扒拉都不要动
    include /etc/nginx/conf.d/*.conf;  #原有别动
    include /etc/nginx/sites-enabled/*; #原有别动
    #下面是需要手动添加的：++++++++++++++++++
    server {
        listen      80 ; #可访问端口号，默认是80，也可设置为其它
        server_name  47.98.101.114;  #云服务器可访问外网链接
        #access_log  logs/host.access.log  main;
        location / {
            root   /home/FloraThumb/dist; #这里写vue项目在云服务器中的地址
            index  index.html; #这里是vue项目的首页，需要保证dist中有index.html文件
        }
        error_page   500 502 503 504  /50x.html;#错误页面    
    }
}

sudo nginx -c /etc/nginx/nginx.conf

nginx -s reload

module.exports = {
  devServer: {
      proxy: {
        '/api': {   // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
            target: "https://trefle.io", //目标地址，一般是指后台服务器地址（只到域名即可）
            changeOrigin: true, //是否跨域
            // pathRewrite: {  //重写路径（将带有api换成空字符串）：此处不需要
            //   '^/api': ''
            // }
        },
        '/baidu': { // 
          target: "http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate", //目标地址，一般是指后台服务器地址（只到域名即可）
          changeOrigin: true, //是否跨域
          pathRewrite: {  //重写路径（将带有/baidu换成空字符串）
            '^/baidu': ''
          }
        },
    }
  }
}

export function getSpecialDetail(data){
    return request({
        url:"/api/v1/species/" + data.id ,
        method:"GET",
        headers:{
            'Authorization': "<我的token>",  #此处为token参数
        }
    })
}

export function translate(data){
    return request({
        url:'/baidu',
        headers:{
            'Access-Control-Allow-Origin':'*',
            'Content-Type':'application/x-www-form-urlencoded'
        },
        method:"POST",
        data:data,
    });
}

server {
        listen      80 ;#自己设置端口号
        server_name  47.98.101.114;#自己设置项目名称
        #access_log  logs/host.access.log  main;
        location / {
            root   /home/FloraThumb/dist;#这里写vue项目的所在地址
            index  index.html;#这里是vue项目的首页，需要保证dist中有index.html文件
        }
        #添加代理配置
        location /api{
            proxy_pass https://trefle.io;
        }
        location /baidu {
            proxy_pass http://api.fanyi.baidu.com/api/trans/vip/fieldtranslate;
        }
        error_page   500 502 503 504  /50x.html;#错误页面
    }

sudo nginx -c /etc/nginx/nginx.conf

nginx -s reload