详解基于Vue,Nginx的前后端不分离部署教程


Posted in Javascript onDecember 04, 2018

有小伙伴私信问我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文件夹

详解基于Vue,Nginx的前后端不分离部署教程

你看,它就安静的躺在这里,慈祥又安和

二、接下来就是我们后端服务器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文件
  }  
}

- 我贴出来一个配置信息demo,大家可以根据这个demo来修改你的

server { 
  listen 80;   
  server_name localhost;   
  root E:/nginx-root/dist;     
  autoindex on;    
  charset utf-8;

  location /index/hotsShowList { 
    proxy_pass http://www.baidu.com;    
  }    

  location / {
    try_files $uri $uri/ /index.html;
  }  
}

6.最后,准备享受成功的喜悦

重启Nginx服务器,浏览器访问localhost:你的端口号,在这里我设置的是默认值80,你的可以随意,不过最好也设成80把,当你按下回车的那一刻,你的项目已经跑起来了,恭喜你,部署成功,现在,双手离开键盘,摘下你的耳机,可以欢呼了!!!

三、最后给大家做个小结,总结一下本地部署用到的一些命令

start nginx
  //开启nginx服务
nginx -s stop

//关闭nginx服务,(你可以关闭服务再重新开启服务来达到重启nginx服务的效果)
yarn build

 //打包vue项目到dist文件夹下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
js实现前端分页页码管理
Jan 06 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
JS+CSS实现动态时钟
Feb 19 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 #Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 #Javascript
React事件处理的机制及原理
Dec 03 #Javascript
JointJS流程图的绘制方法
Dec 03 #Javascript
微信小程序之事件交互操作实例分析
Dec 03 #Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 #Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 #Javascript
You might like
ZF等常用php框架中存在的问题
2008/01/10 PHP
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
php变量作用域的深入解析
2013/06/03 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
python的else子句使用指南
2016/02/27 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
pytorch permute维度转换方法
2018/12/14 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
python中K-means算法基础知识点
2021/01/25 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
工商管理应届生求职信
2013/10/07 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书