详解基于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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
深入理解js中this的用法
May 28 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
json 带斜杠时如何解析的实现
Aug 12 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
php中常用字符串处理代码片段整理
2011/11/07 PHP
PHP仿盗链代码
2012/06/03 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
javascript常用方法总结
2015/05/14 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python的time模块中的常用方法整理
2015/06/18 Python
Python编程之序列操作实例详解
2017/07/22 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
浅谈python写入大量文件的问题
2018/11/09 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
Python中format()格式输出全解
2019/04/12 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
幼儿园六一亲子活动方案
2014/08/26 职场文书
致运动员的广播稿
2015/08/19 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书