详解基于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 面向对象特性
Dec 28 Javascript
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
JavaScript中return false的用法
Mar 12 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
Node 自动化部署的方法
Oct 17 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
CocosCreator入门教程之网络通信
Apr 16 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多用户读写文件冲突的解决办法
2013/11/06 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
python实现爬山算法的思路详解
2019/04/09 Python
Django接收自定义http header过程详解
2019/08/23 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
python集合的新增元素方法整理
2020/12/07 Python
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
同学聚会通知书
2015/04/20 职场文书
《窃读记》教学反思
2016/02/18 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android