Vue+Springboot前后端项目分离开发,我们在部署的时候就需要将两者分开来部署。
vue部署
由于我们是通过Linux + nginx的方式来部署vue。因此在你的linux中需要安装nginx。nginx的安装方式不多说,直接解压nginx项目包然后编译启动即可。
其中前端项目Vue的部署步骤如下:
- 打包并上传vue项目到linux中
- 编辑Nginx配置文件,将其访问路径重定向到linux中的vue项目路径
- 重启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
访问即可得到前端项目。