相思资源网 Design By www.200059.com

一、业务描述:

最近在做一个电商的项目,里面有平台端和商家端以及用户端,那么这么多Vue项目如何部署到服务器呢?

二、部署

(1)首先在本地测试项目可以启动并且能正常运行。

(2)在项目中输入npm run build

多个Vue项目部署到服务器的步骤记录

此时会生成一个文件

多个Vue项目部署到服务器的步骤记录

(3)在服务器上安装Nginx,并将admin-web上传到服务器。

我上传的位置:

多个Vue项目部署到服务器的步骤记录

 (4)修改Nginx文件,找到nginx.conf

多个Vue项目部署到服务器的步骤记录

 三、如果此时有多个vue项目呢?

多加几个location即可

多个Vue项目部署到服务器的步骤记录

四、最后记得保存

:wq

五、重新启动Nginx

systemctl restart nginx

六:Nginx.conf的内容

server {
  listen  80;
  server_name localhost;
 
  #charset koi8-r;
 
  #access_log logs/host.access.log main;
 
  location / {
   root html/dist/;
   index index.html index.htm;
   try_files $uri $uri/ @router;
   index index.html;
  }
  #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
  location @router {
  #   #因此需要rewrite到index.html中,然后交给路由再处理请求资源
     rewrite ^.*$ /index.html last;
  }
 
  location /admin {
   alias /usr/local/nginx/admin/dist;
   index index.html index.htm;
   try_files $uri $uri/ @router;
   index index.html;
  }
 
    #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的
  location @router {
  #   #因此需要rewrite到index.html中,然后交给路由再处理请求资源
   try_files $uri $uri/ @router;
   index index.html;
  }
 
    #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体>的文件
  location @router {
  #   #因此需要rewrite到index.html中,然后交给路由再处理请求资源
    rewrite ^.*$ /index.html last;
  }

总结

标签:
vue项目如何部署,vue项目自动部署,服务器发布vue项目

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“多个Vue项目部署到服务器的步骤记录”

暂无多个Vue项目部署到服务器的步骤记录的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?