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

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

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

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

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

(0)

相关推荐

  • 基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践

    淘宝网线上应用的传统软件栈结构为 Nginx + Velocity + Java,即: 在这个体系中,Nginx 将请求转发给 Java 应用,后者处理完事务,再将数据用 Velocity 模板渲染成最终的页面. 引入 Node.js 之后,我们势必要面临以下几个问题: 技术栈的拓扑结构该如何设计,部署方式该如何选择,才算是科学合理?项目完成后,该如何切分流量,对运维来说才算是方便快捷?遇到线上的问题,如何最快地解除险情,避免更大的损失?如何确保应用的健康情况,在负载均衡调度的层面加以管理?承系

  • nginx+vue.js实现前后端分离的示例代码

    1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,

  • 部署前后端分离式nginx配置的完整步骤

    前言 老生常谈了,这里谈谈我的理解的前后端分离,简单的分离无非是将原来mvc的view层剥离出来,独立一个成为Servlet服务,Servlet之间依靠http连通.这里的view Servlet容器可以是任意一种服务端服务,Tomcat.Apache.Nginx.IIS,都可以.这里以常用的Nginx为例子做简单的介绍. 需求分析 先来一波需求分析. 单项目 单项目指的是一台服务器部署一个前端服务,使www.xxx.com => index.html的单一指向. 多项目 多项目指的是一台服务器

  • Nginx实现前后端分离

    #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream;

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

    有小伙伴私信问我vue项目是如何进行前后端不分离打包发布的,那我岂能坐视不管,如此宠粉的我肯定是要给发一篇教程的,话不多说,开始操作 前端假如我们要发布我们的Vue项目,假设我们前端用的是history路由(要发就发个全套的),并且在后端带有一个二级目录,以便于可以在服务器上部署N个项目,在这里后台服务器的话,我用Nginx服务器来给大家模拟,接下来就面对疾风吧: 一.在这里我前端vue项目使用vue cli脚手架进行搭建的,后台使用Nginx,首先是前端配置: 1.前端配置,在这里假如后端访问

  • 详解利用 Vue.js 实现前后端分离的RBAC角色权限管理

    项目背景:物业管理后台,不同角色拥有不同权限 采用技术:Vue.js + Vuex + Element UI 实现 RBAC 权限管理需要后端接口支持,这里仅提供前端解决方案. 因代码篇幅较大,对代码进行了删减,文中 "..." 即为省略的一部分代码. 大致思路: 首先登录成功后,从后台拉取用户当前可显示的菜单和可用权限列表,分别将其存入 store 的 nav(菜单导航) 和 auth(用户可用权限) 中,在用户切换路由时,判断是否存在 auth ,如果不存在,则重新获取,判断当前访

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s

  • 详解基于Centos7+Nginx+Tomcat8的负载均衡服务器的搭建

    由于工作的需求,在使用中,需要搭建负载均衡,研究了Apache+Tomat负载均衡的方案,并且通过检索相关的文章,进行了比较发现,Apache负载负载均衡在使用的效率上,远远不如Nginx的效率高,因此决定使用Nginx来进行服务的搭建.最初YUM安装了Nginx,但是不知道什么原因,Nginx的服务可以正常启动,静态页面也可以正常访问,但是就是无法正常的搭建虚拟主机和负载均衡.对引没有深究原因,决定把他卸载,然后手动安装. 手动安装好Nginx后,一切正常,虚拟主机,负载均衡的配置全部没有任何

  • 详解基于vue的服务端渲染框架NUXT

    Nuxt 随着现在vue和react的流行,许多网站都做成了SPA,确实提升了用户体验,但SPA也有两个弱点,就是SEO和首屏渲染速度.为了解决单页应用的痛点,基于vue和react的服务端渲染应运而生.由于公司的框架采用的是vue,所以就简单的研究了一下基于vue的服务端渲染框架--NUXT.在vue的官网有关于服务端渲染的详细介绍,而NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置,也集成了Vue2.vue-router.vuex.vux-meta(管理页面meta信息的),利用

  • 详解基于vue的移动web app页面缓存解决方案

    现在移动web app越来越热门了,许多公司开始尝试使用angular.react.vue等MVVM框架来开发单页架构的web app.但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题: 识别前进后退行为 后退时恢复之前的页面 笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路. 识别前进后退 先说第一个问题.和原生app不一样,浏览器中主要有这几个限制: 没有提供前进后退的

  • 详解基于Vue+Koa的pm2配置

    目前使用的技术栈是:前端Vue.后端Koa.数据库Mongodb. 然而每当起服务的时候,都要 npm start . node ./server/app.js ,还要同时保持这两个窗口一直是开着的,很是麻烦. 而且因为我使用的是koa,也没有使用狼叔写的koa脚手架.是自己基于廖雪峰老师的 Koa框架 改的一个小型mvc.导致没有热更新. 为了简化这种没必要的操作及增加热更新,开始想怎么进行优化.于是选择了 pm2 配置pm2 先安装pm2: npm i pm2 . npm i pm2 -g

  • 详解基于Vue/React项目的移动端适配方案

    前言 本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案. px2rem或postcss-px2rem 在移动端中,为了设配不同的设备,通常使用rem来做适配. rem是通过根元素进行适配的,网页中的根元素指的

  • 详解基于Vue的支持数据双向绑定的select组件

    今天用Vue做一个小项目时需要用到多个select筛选功能,但是原生的太丑,如果直接写在当前页多个select处理起来又太繁琐,第三方ui又太大,所以就自己写了一个,并上传了GitHub仓库,仓库地址:https://github.com/tuohuang/vue-select 使用方法: 引入组件: import VueSelect from '../components/VueSelect' 注册组件 export default { components: { VueSelect } }

  • 详解基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除,新增的optimization使用简单 在未来,CSS.HTMl和文件都会成为原生模块 [0配置] webpack4 设置了默认值,以便无配置启动项目 entry 默认值是 ./src/ output.path 默认值是 ./dist mode 默认值是 production [模块类型] web

随机推荐