前后端分离:vue项目部署服务器操作步骤详细

部署前端项目vue到服务器

首对应的是找到项目进入对应的目录下
进行 npm run build 会生成一个dist文件将整个dist文件上传到服务器就可以了
然后就是首先就是安装node.js 对应的版本不建议最先版本有可能会出现一些莫名的错误

node.Js  安装完成后就是软连接  类似于配置环境变量

下来就是安装 express - generator生成器

 npm install -g express -generator

创建项目

express 项目名字

进入项目安装依赖

npm  install

对应刚才生成的dist放入对应的项目名中的public中
之后运行

npm start

直接打开浏览器就可以就进行访问了

但是有的项目属于前后端项目分离需要后端给前端处理相应返回数据结果整个时候需要Nginx进行反向代理这个分离项目

推荐使用服务器宝塔面板安装可以减少很多的操作和出错概率
对应的还是需要设置自己的端口不建议使用熟知的端口号码也不建议用默认的80

可以直接在自己的vue项目中的prod.env.js中设置端口和主机也可以在Nginx配置文件nginx.conf中进行设置

以及在前后端数据库的提交路径也要和后端的虚拟路径相符合，如果是不同的服务器也要将localhost更改为公网地址

不然访问前端会出现报错

会很大程度影响判断是nginx.conf配置写的有问题。

剩下的就是对nginx.conf文件配置

前端访问的端口以及主机名

此处的root是dist的全路径

这个必须要要不然对应的前端静态资源不能被访问到

     location ~* \.(gif|jpg|jpeg|png|css|js|ico|css|eot|svg|ttf|woff|mov)$ {root  自己项目的dist全路径;expires   48h;access_log   off;
}

其中/dushaoqin 对应的是自己的后端的虚拟路径且此处的端口用的是后端的端口号码
剩下的地方可以和我一样主要是就是通用性的配置

 location /dushaoqin {proxy_pass http://公网地址：端口号/虚拟路径/;proxy_set_header Host $host;proxy_connect_timeout 600;                #配置点1proxy_read_timeout 600;                  #配置点2，如果没效，可以考虑这个时间配置长一点proxy_send_timeout 600;                  #配置点3proxy_set_header Host $host:$server_port;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";}

到这里基本上前端项目就差不多了
打开运行后端项目就可以进行访问前端的资源路径了

主要难点就是

对应的nginx.conf的配置以及vue对应的前后端数据接口api的路径设置是否同步

前后端分离:vue项目部署服务器操作步骤详细相关推荐

前后端分离的项目部署到tomcat_如何在开发时部署和运行前后端分离的JavaWeb项目...
在开发中大型的JavaEE项目时,前后端分离的框架逐渐成为业界的主流,传统的单机部署前后端在同一个项目中的工程项目越来越少.这类JavaWeb项目的后端通常都采用微服务的架构,后端会被分解为诸多个小项 ...
.NET Core开发实战（第23课：静态文件中间件：前后端分离开发合并部署骚操作）--学习笔记（下）...
23 | 静态文件中间件:前后端分离开发合并部署骚操作这里还有一个比较特殊的用法一般情况下,我们前后端分离的架构,前端会编译成一个 index.html 文件和若干个 CSS 文件和 JavaSc ...
笔记合并_.NET Core开发实战（第23课：静态文件中间件：前后端分离开发合并部署骚操作）学习笔记（上）...
23 | 静态文件中间件:前后端分离开发合并部署骚操作我们先来看一下静态文件中间件有哪些能力 1.支持指定相对路径 2.支持目录的浏览 3.支持设置默认文档 4.支持多目录映射源码链接: http ...
.NET Core开发实战（第23课：静态文件中间件：前后端分离开发合并部署骚操作）--学习笔记（上）...
23 | 静态文件中间件:前后端分离开发合并部署骚操作我们先来看一下静态文件中间件有哪些能力 1.支持指定相对路径 2.支持目录的浏览 3.支持设置默认文档 4.支持多目录映射源码链接: http ...
JAVA外卖项目第九天前后端分离和项目部署优化
瑞吉外卖项目优化-Day03 课程内容前后端分离开发 Yapi Swagger 项目部署前言当前项目中,前端代码和后端代码混合在一起,是存在问题的,存在什么问题呢? 主要存在以下几点问题: 1) ...
前后端分离的项目部署到tomcat_前后端分离后，tomcat服务器部署和发布
打包服务端: IDEA打开项目,等待项目初始化完成,点击Build- Build Artifacts,进行打包 image.png 点击之后会出现下面这个小窗口,选择红框中部分: image.png ...
ruoyi前后端分离vue打包部署发布
说明:打包使用的方式是把vue打包成dist文件后,放到若依的"ruoyi_admin"的静态文件模块下面,访问"http://localhost:9070/(端口&qu ...
laravel + Vue 前后端分离之项目配置 - 开发环境
既然你来到查看这篇文章,那么你应该知道PHP 版本 >=7. 接着看一下目录 |-blog |-- api |-- front 目录外部很简单,,不多说了,赶紧看重点配置Laravel 作为前 ...
基于Springboot+vue前后端分离的项目--后端笔记
效果图: 1.前言从零开始搭建一个项目最重要的是选择一个自己熟悉的框架,此项目使用Springboot框架来构建后端结构,使用vue来构建前端页面.数据层我们常用的是Mybatis,这里我大部分使 ...

前后端分离:vue项目部署服务器操作步骤详细

主要难点就是

前后端分离:vue项目部署服务器操作步骤详细相关推荐

最新文章

热门文章