nginx 部署vue项目，使用脚手架生成的vue ----- （windows 7 环境）

 第一步： 打包VUE项目 生成dist文件夹

  1.使用npm run build 直接打包成dist文件夹

 

 第二步： 配置nginx.conf 配置文件

  1. 打开nginx目录下的conf文件夹下的 nginx.conf文件

  2. 在文件中添加一个server块， 每一个server块都可以看成是一个虚拟主机。

　　

 server {
  
 　　　　listen 80； # 监听端口，可修改，默认为80
 
 　　　　server_name  localhost www.123.com； # 域名，可以写多个，也可以写IP地址
 
      　　  root  E:\demo\dist； # 前端文件路径
 
               index index.html index.htm；#要显示的主文件 
 　　　　# 此时打开项目只能看index.html中内容，若访问localhost/login 就会报404的错误，这是由于其他路径使用了“伪静态”，所以需要对路由进行重写

 　　　　location \ {
 　　　　　　try_files $uri $uri/ @router;
 　　　 }
            location @router{
                  rewrite  ^.*$ /index.html last;
           }
    
            # VUE项目中每个请求中 添加 /apis
            location /apis {
                rewrite  ^/apis/(.*)$ /$1 break;
                proxy_pass  http://0.0.0.0:3003
            }
 　　}        

 

第三步：重启nginx服务，并查看效果

　1.  nginx -s reload  # 重新载入nginx配置文件

    2. nginx -s reopen # 重新启动nginx

    3. 打开浏览器 输入 http://localhost:80 即可看到你的页面