Linux通过Nginx部署Vue项目

Vue+Springboot前后端项目分离开发，我们在部署的时候就需要将两者分开来部署。

vue部署

由于我们是通过Linux + nginx的方式来部署vue。因此在你的linux中需要安装nginx。nginx的安装方式不多说，直接解压nginx项目包然后编译启动即可。

其中前端项目Vue的部署步骤如下：

1. 打包并上传vue项目到linux中
2. 编辑Nginx配置文件，将其访问路径重定向到linux中的vue项目路径
3. 重启Nginx并访问即可

打包以及上传vue

在visual studio code 的vue项目中打包vue 命令如下

npm run build:prod

打包后在项目中有一个dist的文件夹。这个文件夹就是vue项目，我们需要将这个文件夹上传到linux中。

编辑Nginx配置文件

server{
        listen          8098; #vue访问的端口
        server_name     127.0.0.1; #vue访问本机这里可以配成linux的地址
        root /data/backstage_mengfusheng/vue/dist; # vue文件夹项目在linux中的路径
        autoindex on;
        location / {
                try_files $uri/ $uri/ @router;
                add_header Cache-Control no-store;
        }
        location @router {
                rewrite ^.*$ /index.html last;
        }

   }

重启nginx并访问即可

重启nginx

./sbin/nginx -t -c ./conf/nginx.cfg

访问即可得到前端项目。