没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
详解基于详解基于Vue,,Nginx的前后端不分离部署教程的前后端不分离部署教程
主要介绍了详解基于Vue,Nginx的前后端不分离部署教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小
编过来看看吧
有小伙伴私信问我vue项目是如何进行前后端不分离打包发布的,那我岂能坐视不管,如此宠粉的我肯定是要给发一篇教程的,话不多说,开始操作
前端假如我们要发布我们的Vue项目,假设我们前端用的是history路由(要发就发个全套的),并且在后端带有一个二级目录,以便于可以在服务器上
部署N个项目,在这里后台服务器的话,我用Nginx服务器来给大家模拟,接下来就面对疾风吧:
一、在这里我前端一、在这里我前端vue项目使用项目使用vue cli脚手架进行搭建的,后台使用脚手架进行搭建的,后台使用Nginx,首先是前端配置:,首先是前端配置:
1.前端配置,在这里假如后端访问的时候要访问my-app文件夹下的打包好的dist文件夹,所以我们要在前端做一些配置
① 在vue.config.js文件中添加如下配置( 在这里我们手动在src文件夹下面创建vue.config.js文件,相当于给webpack添加了新的配置 ):
baseUrl:'/my-app/'
② router路由的配置(相信你知道这个配置应该放到哪吧,毕竟都已经到了发布的操作了):
const router = new VueRouter({
mode:"history",
base:'/my-app/',
routes
})
2.接下来就是我们前端的打包接下来就是我们前端的打包
① 因为在这里我使用的vue cli搭的项目,所以直接执行yarn build进行打包,你会发现多了个dist文件夹,这里面就是打包过后生成的文件
② 在这里简单解释下打包后js和css文件自动加了版本号的基本作用:可以进行版本回退,唯一标识。
③ 在这里我们 模拟 把打包好的文件夹交给后端,所以我将打包好的dist文件夹放到一个我创建好的文件夹nginx-root文件夹里面,并且放到my-app
文件夹
你看,它就安静的躺在这里,慈祥又安和
二、接下来就是我们后端服务器二、接下来就是我们后端服务器Nginx的操作的操作
1.既然是教程,那就彻底手把手教学,第一步我们要先下载一个Nginx服务器,完全手把手,彻底手把手,不要九块九,更不要九十九,别太感动
① 去nginx.org下载一个Nginx,在右侧找到download点进去,在这里我们可以下载Stable version下面的 nginx/Windows-1.14.1 这个版本,
链接地址:http://nginx.org/en/download.html
② 然后将下载好的压缩包解压后放到你的本地磁盘里
③ 给Nginx配置环境变量,相信大家应该都知道怎么配环境变量把,不知道怎么配环境变量可以私聊我,在这里就不做过多解释了,直接讲解下一
步操作
2.开始Nginx的配置
① 在你的 nginx(应该是nginx-1.14.1)文件夹中 打开命令行,执行命令: start nginx
//开启nginx服务器,执行完该命令后,如果你的命令控制工具闪了一下,并且光标悬停一闪一闪放光芒,此时你就可以在你的浏览器上输入
localhost,按下回车,如果出现了Welcome to nginx!,恭喜你,你已经成功开启nginx服务器的封印了
② 在编译器中,将你的 nginx文件夹下 找到 conf文件夹 ,然后进入到 nginx.conf文件,找到server,将server和括号里面的内容用#注释掉(注释的时
候要小心,不能注释多也不能注释少,一定要精准,精准你懂吧)
③ 在conf文件夹下创建一个 conf.d文件夹 (该名字随意起),在这里我们可以在conf.d文件夹下创建一个 test.conf文件,在后期你可以创建多个.conf
文件,来配置你的多个项目的server
④ 在nginx.conf文件中把这行代码在http括号里面找个地方放下,include后面跟的是你conf.d文件夹的绝对路径,这句代码的意思就是匹配下面所有
的conf文件,这是我的,你把后面的路径改成你的就可以,注意要把斜杠改成反斜杠/
include D:/nginx-1.14.1/conf/conf.d/*.conf //这是我的,你把路径改成你的conf.d的绝对路径就可以,注意斜杠是'/'不是'\'
⑤ 在你的test.conf文件中添加配置信息,这是配置信息的解释,大家可以根据我的配置信息demo来配置你的
server {
listen 80; ------端口号
server_name localhost; ------域名
root 你的dist文件夹的绝对路径; ------根
autoindex on; ------将你匹配的文件自动匹配到index.html
expires 1s; ------缓存(只是为了演示才写的)
charset utf-8;
location /匹配路径{
proxy_pass 接口反向代理的目标target; ------在这里配置你的反向代理,若要配置多个代理路径,将此代码复制多个修改即可
}
location / {
try_files $uri $uri/ /index.html; ------这是从vue官网抄过来的配置,意义在于保证一旦我们的路由刷新的时候一旦后端找不到对应的路由,将自动跳转到index.html文件
}
}
weixin_38593738
- 粉丝: 0
- 资源: 925
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- JAVA 中的Spring框架介绍包括起源、体系结构、核心部分、特点等
- 2024年小米汽车产业链分析及新品上市全景洞察报告
- 基于Qt和C++实现的偏3D风格的异型窗体界面操作+源码(期末大作业&课设&项目开发)
- 基于yolov8的花卉分类系统,包含训练好的权重和推理代码,GUI界面,支持图片、视频、摄像头输入,支持检测结果导出
- 基于图形化编程的单片机教学案例研究
- 基于matlab语音识别的信号灯图像模拟控制技术代码19
- ET200SP-GSD文件-GSDML-V2.43-Siemens-ET200SP-20240209.zip
- STM32CubeIDE H743 + DP83848 + LWIP-UDP服务器跨网段传输数据
- 基于蓝牙单片机的锌烟除尘控制系统
- 基于matlab的hough变换道路提示牌检测识别系统代码18
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页