详解基于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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
浅析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
在普通HTTP上安全地传输密码
2007/07/21 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
python学习 流程控制语句详解
2016/06/01 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
计算机专业毕业生求职信分享
2013/12/24 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
出纳员岗位责任制
2014/02/11 职场文书
研发工程师岗位职责
2014/04/28 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
导游欢迎词范文
2015/01/23 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
工商局调档介绍信
2015/10/22 职场文书