Linux 环境下部署 VUE 前端项目

最新推荐文章于 2024-09-20 16:14:49 发布

EvoGenius

最新推荐文章于 2024-09-20 16:14:49 发布

阅读量2.3k

点赞数 25

文章标签： vue.js 前端 linux

本文链接：https://blog.csdn.net/evogenius/article/details/139314448

版权

1、安装下载Nginx

运行以下终端命令行进行Nginx安装

sudo apt-get install nginx

安装完成后查看nignx版本，显示版本信息则说明安装成果

tanghao@DESKTOP-KL9JBME:~$ nginx -v
nginx version: nginx/1.18.0 (Ubuntu)

启动nginx，如正确启动，则不会出现任何提示信息。

sudo nginx

这里需要注意，启动nginx的时候可能会出现端口占用的情况，这个时候需要杀死占用进程。

根据Nginx配置文件查看配置的端口默认的是80端口，然后我们输出指令查看端口占用情况。输入命令：sudo netstat -ntlp|grep 80。

查看到占用的端口后，输入kill命令杀死占用进程：sudo kill -9 1515087（进程号根据你自己的来输入）

最后，重启nginx：sudo nginx

tanghao@DESKTOP-KL9JBME:~$ sudo netstat -ntlp|grep 80
tcp        0      0 127.0.0.1:42475         0.0.0.0:*               LISTEN      802/node
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      1515087/nginx: mast
tcp6       0      0 :::80                   :::*                    LISTEN      1515087/nginx: mast

tanghao@DESKTOP-KL9JBME:~$ sudo kill -9 1515087

nginx启动成功后打开服务器的外网面板地址，在浏览器输入本机ip后可以看到如下界面，至此成功大半！！

2、vue项目配置跨域请求

当在前端vue项目中需要调取受同源策略保护的Web API时，即发生所谓跨域请求，此时发送不成功，一般可以采用ajax的jsonp发起跨域请求，而对于vue项目的axios不支持jsonp请求。在开发环境下，可以选择修改vue.config.js文件来发起跨域请求。

下述代码中设置了一个代理请求 '/api'，代理的目标地址是 https://172.xx.xx.xx:8080，即后端服务器的ip及网关端口。

module.exports = {
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'https://172.xx.xx.xx:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

changeOrigin: true 代表支持跨域（必写）；

pathRewrite代表重写路径。在发起请求过程中，对于url中以'/api'开头的请求，首先会将/api重写为空字符串，然后将vue.config.js文件中'/api'对应的target目标地址连接到请求头部，即若请求url为“ /api/management/login”，则实际会将请求发送到 https://172.xx.xx.xx:8080/management/login，从而实现跨域请求；

export function login(data) {
  return request({
    url: '/management/login',
    method: 'post',
    data
  })
}

3. 打包vue项目并上传到服务器上

在VS Code或者IDEA中打开已完成的前端Vue项目，输入如下命令进行打包，打包完成后再当前目录下出现名为dist文件夹，即为需要上传到服务器上的文件夹。

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

4. 修改Nginx配置

首先需要先暂停Nginx服务（一定要做！！！）：sudo nginx -s stop

使用如下命令查看Nginx配置文件路径：sudo nginx -t

tanghao@DESKTOP-KL9JBME:~$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

使用vim命令打开配置文件进行编辑，在http{}中添加服务server，如下所示：sudo vim /etc/nginx/nginx.conf

server {
        listen       8060;  #自己设置端口号，访问前端的端口号
        server_name  xxx;  #自己设置项目名称
        location / {
            root   /home/tanghao/front-end/dist;  #服务器上vue项目的所在地址
            index  index.html;  #这里是vue项目的首页，需要保证dist中有index.html文件
        }

        #添加代理配置

        location /api/ {
            rewrite ^/api/(.*) /$1 break;             # 做统一代理
            proxy_pass https://172.xx.xx.xx:8080;     # 后端服务 ip、端口
        }

        error_page   500 502 503 504  /50x.html;  #错误页面
}