详解基于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系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery实现穿梭框功能
Jan 19 jQuery
浅析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
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
Javascript Throttle & Debounce应用介绍
2013/03/19 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
Seajs的学习笔记
2014/03/04 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
AngularJS内置指令
2015/02/04 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
URL中“#” “?” &“”号的作用浅析
2017/02/04 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
Python如何实现守护进程的方法示例
2017/02/08 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
10款最好的Python开发编辑器
2019/07/03 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python基于opencv检测程序运行效率
2019/12/28 Python
结束运行python的方法
2020/06/16 Python
python对一个数向上取整的实例方法
2020/06/18 Python
Python 在局部变量域中执行代码
2020/08/07 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
秋季运动会表扬稿
2014/01/16 职场文书
道德模范先进事迹
2014/02/14 职场文书
幼儿老师求职信
2014/06/30 职场文书
促销活动总结模板
2014/07/01 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android