关于vue打包后的Nginx部署

最近在搞一个项目,初次接触时头都大了,因为不了解远程代理之类的知识,vue中的第一意识就是$npm run dev后,直接访问配置的端口号就ok了,当然远程数据直接mock到本地~ 都是泪,虽然运行出来了,但是mock的数据是基于原来线上的项目F12调试模式下,看都调用了哪些接口地址,记录下来充当mock的数据。直到遇到了Nginx,根据自己的项目配置了一上午,终于不用本地mock数据了,如何利用Nginx将vue 打包后的项目看到效果?

一.初识nginx

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等

二.nginx下载

官方网址:http://nginx.org/en/download.html

下载完成以后,得到nginx压缩包

三、nginx启动

注意不要直接双击nginx.exe,这样会导致很多问题。可以使用命令行工具进行nginx的启动、停止和重启工作。使用Win+R快捷键打开命令行窗口,并切换到nginx.exe所在的目录。
$ start nginx 启动nginx
$ nginx -s stop 来快速停止nginx
$ nginx -s quit 完整的停止nginx。

四、运行预览

在执行cnpm run build命令之前,不需要改任何东西,就和cnpm run dev 一样的单纯

难道不需要改配置吗?不需要!!!!但是我们还是来看看Nginx的conf目录下的nginx.conf文件

下面是根据自己的项目配置的:很长,如果没有什么问题的话,可以忽略了。

hosts中配置: 127.0.0.1 qaminiapp.qiakr.flyco.net.cn

.conf中

 

参考:
https://www.cnblogs.com/qiu-Ann/p/9996910.html

关于作者

tu