一般的企业都会采用前后端分离的方式来开发、部署项目,这样做的好处是更好的让前后台各司其职。另外也由于nginx是一个轻量级的静态资源服务器,其高并发也是其优点之一。这样可以减轻双方服务器的压力,同时又可以做到负载分担。那么接下来就简单介绍下如何通过nginx部署vue项目。

一、vue项目打包:

本人在vue 项目打包的时候遇到一些坑,也是慢慢摸索,才得以解决,

会报这个错,查阅了很多资料,找到一个连接:

https://www.css88.com/doc/webpack2/plugins/uglifyjs-webpack-plugin/

因为UglifyJsPlugin不支持es6,

由于在我的项目里用的是ES6,所以需要安装插件。

然后cnpm i

再打包:npm run build:prod

打包成功

打好的包会在dist文件夹下。

包位置

接下来开始nginx的配置。我先nginx的安装应该不用我说了吧,想了解nginx完整安装过程的可以关注我。

二、首先启动nginx,进入sbin目录下

执行 ./nginx即可启动nginx
ps -ef | grep nginx 查看nginx进程

浏览器输入http://localhost即可打开nginx,说明nginx启动没有问题

三、配置nginx

1、先在nginx的目录下新建一个文件夹,命名为vue,会把vue的安装包dist.zip放在此文件夹下。

进入conf目录,编辑nginx.conf文件

root 填写项目所在nginx下的路径

:wq 保存退出。

2、上传vue包到服务器,告诉大家一个上传的小技巧,让你摆脱xftp、winscp的烦恼;

简单一步操作:yum -y install lrzsz

安装好lrzsz后,只需要输入命令:rz即可从windows传输文件到Linux。

先把vue的dist文件夹打成.zip的包。然后上传到服务器

上传之后解压zip包

解压zip包

然后检查配置文件是否正确。

进入sbin目录下:

./nginx -s reload 平滑重启nginx。

现在就可以进入浏览器访问了,由于监听的是80端口。所以只需输入http://localhost就可以看到页面。当页面访问后台请求时,还需要做反向代理。做分布式的时候还需要配置nginx的负载均衡。下一篇会详细介绍nginx反向代理和负载均衡。

nginx+vue实现项目动静分离的更多相关文章

  1. Nginx 和 IIS 实现动静分离

    前段时间,搞Nginx+IIS的负载均衡,想了解的朋友,可以看这篇文章:<nginx 和 IIS 实现负载均衡>,然后也就顺便研究了Nginx + IIS 实现动静分离.所以,一起总结出来 ...

  2. Nginx 和 IIS 实现动静分离【转载】

    前段时间,搞Nginx+IIS的负载均衡,想了解的朋友,可以看这篇文章:<nginx 和 IIS 实现负载均衡>,然后也就顺便研究了Nginx + IIS 实现动静分离.所以,一起总结出来 ...

  3. Nginx 和 IIS 实现动静分离(转)

    转载地址:https://www.cnblogs.com/paul8339/p/5825201.html 动静分离,说白了,就是将网站静态资源(HTML,JavaScript,CSS,img等文件)与 ...

  4. Nginx 反向代理功能-动静分离

    Nginx 反向代理功能-动静分离 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  5. Nginx 配置实例-配置动静分离

    Nginx 配置实例-配置动静分离 1. 静态资源的创建 2. nginx 动静分离的配置 3. 验证 1. 静态资源的创建 这里使用的静态资源主要为 HTML 静态文件和图片. mkdir -vp ...

  6. 10、nginx+uwsgi+django部署(动静分离)

    10.1.说明: 1.介绍: 创建Django项目,可以通过 pyhon3 manage.py runserver 0.0.0.0:8080 & 命令更方便地调试程序,但是如果当一个项目完成了 ...

  7. nginx反向代理、动静分离

    环境:根据http://www.cnblogs.com/zzzhfo/p/6032095.html配置 方法一:根据目录实现动静分离 在web01创建image并上传一张图片作为静态页面 [root@ ...

  8. nginx+tomcat负载均衡+动静分离+redis集中管理session

    1.服务器A安装ng,服务器B.C安装tomcat: 2.服务器A建立/data/www目录,用于发布静态文件: 3.ng无动静分离配置: user root root; worker_process ...

  9. nginx反向代理(动静分离)

    使用反向代理(动静分离)可以让nginx专注静态内容,把动态请求交给apache来处理,发挥各自的优势,而且整个架构更加清晰: 这里假设你已经搭建好了nginx环境; 为了简单起见,就不用源码编译安装 ...

随机推荐

  1. 配置tomcat,访问端口改为80

    首先:找到tomcat的的config文件夹下的server.xml文件: 编辑server.xml 保存server.xml文件,重启tomcat服务器,即可. 亲测好使.

  2. cc 和gcc编译器

    从名字上看,老的unix系统的CC程式叫做C Compiler.但GCC这个名字按GNU的说法叫做Gnu Compiler Collection.因为gcc包含非常多编译器(C, C++, Objec ...

  3. HTML初级教程

    1:标题h1~h6HTML标签有专门的标签处理你页面上的标题,它们是h1,h2,h3,h4,h5和h6,象封建社会一样,h1就是万能的君主而h6就是最底层的百姓. 注意,h1标签在一个页面只能使用一次 ...

  4. led子系统【转】

    本文转载自:http://blog.csdn.net/yuanlulu/article/details/6438841 版权声明:本文为博主原创文章,未经博主允许不得转载. ============= ...

  5. Appium——连接真机,adb devices获取不到设备号

    连接真机后,使用 adb devices获取不到设备号. 1.检查usb接口是否正常,是否正常链接到电脑 2.手机开发者模式是否开启,usb调试是否开启 3.检查驱动是否正常 4.如果驱动显示黄叹号, ...

  6. struts2中<s:if>标签的使用

    转载:http://blog.sina.com.cn/s/blog_5f9938640100v2kr.html A:<s:if>判断字符串的问题: 1.判断单个字符:<s:if te ...

  7. linux应用之mysql数据库的安装及配置(centos)

    CentOS下Mysql数据库的安装与配置   如果要在Linux上做j2ee开发,首先得搭建好j2ee的开发环境,包括了jdk.tomcat.eclipse的安装(这个在之前的一篇随笔中已经有详细讲 ...

  8. 腾讯Hermes设计概要——数据分析用的是列存储,词典文件前缀压缩,倒排文件递增id、变长压缩、依然是跳表-本质是lucene啊

    转自:http://data.qq.com/article?id=817 三.Hermes设计概要 架构描述 系统核心进程均采用分散化设计,根据业务发展需求,可随意扩缩容机器; 周期性数据直接通过td ...

  9. 【转】BZOJ4066(kdtree)(占位)

    https://www.cnblogs.com/OYzx/p/5506468.html BZOJ2863:(允许离线) 题目大意:给定一个n*n的矩形,以及若干个操作,操作有如下两种: 1.给矩形的( ...

  10. PBE加密算法

    这是我参加全国信息安全大赛的设计的加密系统中的一个加密算法,虽然比赛的结果不是非常理想但是,我还是学到了很多东西,现在和大家分享一下,比赛收获的东西. 基于口令加密 PBE(Password Base ...