vue项目打包后 使用nginx部署

Nginx的安装与配置

Nginx官网下载所需版本安装

解压下载好的nginx

修改nginx配置文件，配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段

 

 

里面的相关注释是在是太多了，那么我把所有的注释清除一下(这是方便看清nginx配置到底需要什么基础的配置)

worker_processes  1; ##指明了nginx要开启的进程数,不用修改，但考虑到实际情况，可以修改这个数值，以提高性能

events {
    worker_connections  1024;##最大连接数
}

####设置http服务器
http {
    server_names_hash_bucket_size 64; #扩大缓存
    include       mime.types; ##文件扩展名与文件类型映射表
    default_type  application/octet-stream; ##默认文件类型

    sendfile        on; ##开启文件高效传输模式防止网络及磁盘I/O阻塞，提升Nginx工作效率
    keepalive_timeout  65; ##超时时间

    upstream  test {  #服务器集群名字   
	ip_hash; 
	server  47.111.111.111:8180 ; #api接口端口配置 
    } 

    #虚拟主机
    server {
        listen       80; ##表示的项目所占用的端口
        server_name  localhost; ##项目域名或者ip

        location / {
            root   html;   #表示你的项目文件所处于的位置,在windows下面表示的是与conf目录处于同一级
            index  index.html index.htm; #默认打开index.html
        }

	location /api {
		add_header 'Access-Control-Allow-Origin' '*';#添加接口跨域
		proxy_pass http://test; #服务器集群名字
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		 } 

        error_page 404 /index.html; #这个配置，预防页面刷新后跳转到404页面
        
    }
    ####如果包含多个项目，只需要多写一个server即可，注意server_name不能相同
}

 

直接双击nginx.exe运行（会有个黑块一闪而过，正常现象）

也可以使用命令运行 首先要切换到nginx的目录中

启动：start nginx.exe 

停止：nginx.exe -s stop 

重新加载：nginx.exe -s reload

测试nginx是否正常运行

浏览器输入server_name配置的地址加80 ，显示welcome，已经配置成功

 

vue项目打包部署

npm run build

项目打包完成后，将dist文件夹部署服务器，

修改nginx 配置文件中的 location 

location / {
            root   E:/workSpace/**/dist;   #写入你部署文件夹路径
            index  index.html index.htm; #默认打开index.html
 }

每次配置完都要 重新加载nginx：nginx.exe -s reload

再次访问配置好的地址加80即可访问到对应的vue项目

 

注：

1，域名解析ip需要和部署nginx的服务器ip相同。

2，与tomcat并存施，会提示80端口被占用，解决方案改变tomcat端口号，微信环境下只支持80端口。