• 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:demodist; # 前端文件路径
     
                   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 即可看到你的页面

  • 相关阅读:
    bzoj3687
    bzoj1930
    splay启发式合并
    学习笔记::启发式合并
    bzoj1798
    java提高篇(三)-----理解java的三大特性之多态
    java提高篇(二)-----理解java的三大特性之继承
    队列的顺序实现(循环数组)与链式实现
    java提高篇(一)-----理解java的三大特性之封装
    设计模式读书笔记-----解释器模式
  • 原文地址:https://www.cnblogs.com/0915ty/p/10461315.html
Copyright © 2020-2023  润新知