Linux通过Nginx部署Vue项目

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

访问即可得到前端项目。

Linux通过Nginx部署Vue项目相关推荐

Ubuntu 下搭建 Nginx 部署 vue 项目
Ubuntu 下搭建 Nginx 部署 vue 项目上一篇:Ubuntu 下部署 SpringBoot 第一步: Ubuntu 上安装 nodejs 执行 apt install nodejs 命令 ...
VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
nginx部署vue项目，给访问路径加前缀
Nginx安装与启动去官网下载nginx压缩包,解压到电脑合适位置,我这放在D盘,目录是D:\nginx-1.21.6, 在这个路径,直接输入cmd,打开命令行,启动命令: nginx.exe 或者 ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...
服务器使用Nginx部署Vue项目
服务器使用Nginx部署Vue项目首先得购买个服务器,在这就不教怎么购买了,本文章使用的是阿里云轻量级服务器CentOS7.6 一.安装Nginx 1. 使用XShell连接我们的服务器 2. 配置 ...
Centos+Nginx部署Vue项目
Centos+Nginx部署Vue项目 1.项目打包生成dist文件夹在项目根目录下打开cmd窗口,输入命令 npm run build //生成dist文件夹 2.将dist文件夹上传到cento ...
nginx部署vue项目加载资源慢优化方案
目录 1.问题 2.解决方案推荐gzip压缩解压 2.1 vue项目的配置文件中加如下配置 2.3 nginx服务器配置 1.问题当我采用nginx部署了vue的项目后发现第一次访问网站需要1分左右 ...
nginx部署vue项目，内外网映射后访问不到
问题:在内网服务器中用nginx部署了vue项目,再将外网域名与内网IP做了映射. 访问内网IP:PORT 成功进入访问域名:PORT 无法进入例:内网ng地址:123.12.1.2:9000 通 ...
Ubuntu安装Nginx部署vue项目
官网下载Nginx压缩包 Nginx下载上传到Linux或直接在Linux上下载压缩包. # 解压 tar -zxvf ... ubuntu下安装nginx时依赖库zlib,pcre,openssl ...