• nginx+vue实现项目动静分离


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

    一、vue项目打包:

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

    nginx+vue实现项目动静分离

     

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

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

    因为UglifyJsPlugin不支持es6,

    nginx+vue实现项目动静分离

     

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

    nginx+vue实现项目动静分离

     

    nginx+vue实现项目动静分离

     

    nginx+vue实现项目动静分离

     

    然后cnpm i

    再打包:npm run build:prod

    nginx+vue实现项目动静分离

    打包成功

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

    nginx+vue实现项目动静分离

    包位置

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

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

    执行 ./nginx即可启动nginx
    ps -ef | grep nginx 查看nginx进程
    nginx+vue实现项目动静分离

     

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

    三、配置nginx

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

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

    nginx+vue实现项目动静分离

     

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

    nginx+vue实现项目动静分离

     

    :wq 保存退出。

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

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

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

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

    nginx+vue实现项目动静分离

     

    上传之后解压zip包

    nginx+vue实现项目动静分离

    解压zip包

    nginx+vue实现项目动静分离

     

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

    进入sbin目录下:

    nginx+vue实现项目动静分离

     

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

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

  • 相关阅读:
    c#简单操作MongoDB_2.4
    将不确定变为确定~老赵写的CodeTimer是代码性能测试的利器
    利用双缓冲队列来减少锁的竞争
    移动端地区选择控件mobile-select-area
    服务器CPU居高不下--解决问题历程
    .NET常用开发工具整理
    免费的精品: Productivity Power Tools 动画演示
    二维码编码与解码类库ThoughtWorks.QRCode
    C#异步编程基础入门总结
    优盘版Kali
  • 原文地址:https://www.cnblogs.com/wangsongbai/p/10307075.html
Copyright © 2020-2023  润新知