zoukankan      html  css  js  c++  java
  • 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 即可看到你的页面

  • 相关阅读:
    Memcached
    sleep和wait的区别
    基于.net Core+EF Core项目的搭建(一)
    .net Core中使用AutoMapper
    发布.net core应用程序并部署到IIS上
    IoC原理-使用反射/Emit来实现一个最简单的IoC容器
    浅谈(IOC)依赖注入与控制反转(DI)
    使用MD5加密字符串
    C#中HttpWebRequest的用法详解
    学习memcached的一个网站
  • 原文地址:https://www.cnblogs.com/0915ty/p/10461315.html
Copyright © 2011-2022 走看看