广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue+Koa2如何打包后进行线上部署
  • 710
分享到

Vue+Koa2如何打包后进行线上部署

2024-04-02 19:04:59 710人浏览 安东尼
摘要

这篇文章给大家分享的是有关Vue+Koa2如何打包后进行线上部署的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1.将Vue和Koa2结合很多人在打完包后就不知道怎么做了,毕竟后面

这篇文章给大家分享的是有关Vue+Koa2如何打包后进行线上部署的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

1.将Vue和Koa2结合

很多人在打完包后就不知道怎么做了,毕竟后面都是后端的事情。如果你用的是Vue-cli3.0,那么打包这一步会非常简单,只需要执行一条命令即可,其它的不用关心:

npm run build

之后会生成一个dist的文件夹,将它放到Koa2目录下的public文件里,然后在Koa2的配置文件app.js里将静态资源指向这个文件夹,指向命令在我们创建Koa2框架时就已经自动生成,所以我们要做的也只是改一下文件地址就行了:

app.use(require('koa-static')(__dirname + '/public/dist'))

改好之后打开koa2的主页,看看是否加载成功,第一步就愉快地完成了。

2.Nginx配置

现在登录服务器,安装完Nginx后,在`/etc/nginx/sites-enabled/`下新建一个conf文件,然后写入配置:

//Koa的端口一般默认是3000
upstream koa.server{
  server 127.0.0.1:3000;
}

server {
  listen   80;
  server_name .******.com;

  location / {
    proxy_pass Http://koa.server;
    proxy_redirect off;
  }
}

写完之后重启Nginx:

sudo /etc/init.d/nginx restart

接着将Koa2文件上传到服务器,启动后在浏览器里输入你的网址或者服务器ip,能访问到就大功告成了。

当然,这套Nginx配置还是非常简陋,如果希望长期稳定运行的话还得加入SSL和Gzip,网上资料很多,如果以后有机会的话我也会讲一下。

3.使用Pm2进行进程管理

能成功访问后接着就是将Koa放到后台运行,这里使用了Pm2进行管理,先来安装:

npm install -g pm2

安装好后在Koa目录下创建一个文件 “pm2.conf.JSON”,然后输入以下代码:

{
  "apps":{
    "name":"blog",
    "script": "bin/www",
    "watch": true,
    "ignore_watch":[
      "node_modules",
      "logs"
    ],
    "instances":2,
    "error_file":"logs/err.log",
    "out_file":"logs/out.log",
    "log_date_fORMat": "YYYY-MM-DD HH:mm:ss"
  }
}

来重点说下两个参数,watch和instances。

Watch是检测到文件有改动会自动重启加载,ignore_watch则是排除不需要监控的文件。

Instances则是开启实例数,建议根据cpu核数进行配置,有多少核就开启多少条。

最后启动:

pm2 start pm2.conf.json

到这里,网站就部署完成了!

感谢各位的阅读!关于“Vue+Koa2如何打包后进行线上部署”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: Vue+Koa2如何打包后进行线上部署

本文链接: https://www.lsjlt.com/news/78184.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue+Koa2如何打包后进行线上部署
    这篇文章给大家分享的是有关Vue+Koa2如何打包后进行线上部署的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1.将Vue和Koa2结合很多人在打完包后就不知道怎么做了,毕竟后面...
    99+
    2022-10-19
  • vue打包后的线上部署Apache、nginx全过程
    目录一、Apache服务器二、nginx服务器总结我们一般情况下将vue项目开发完成后会进行打包上线,本文介绍多种部署情况。 一、Apache服务器 1、vue路由mode:'...
    99+
    2023-02-18
    vue打包 vue线上部署Apache vue线上部署nginx
  • Vue项目上线打包好的文件如何在服务器上部署?
    一、打包Vue项目 1.打开router下的js文件,调成hash模式:mode:'hash'   2.终端输入:npm run build 3.此时项目中会多出一个dist的文件,这个文件就是我们打包出来的项目 二、搭建一个服务器 1.使...
    99+
    2023-09-30
    npm 前端 node.js vue.js
  • Vue打包上线之后部分CSS不生效怎么办
    这篇文章给大家分享的是有关Vue打包上线之后部分CSS不生效怎么办的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。首先注释掉webpack.prod.conf.js中下面的代码ne...
    99+
    2022-10-19
  • Java结合Vue项目打包并进行服务器部署
    目录Java后端项目打包和服务器部署Vue项目服务器部署两周前我刚刚入职实习的时候,后端的几个同事看到我需要学习如何把项目进行部署,都围过来教我怎么部署,我感觉学习到了很多,因此,记...
    99+
    2022-11-13
  • Vue打包上线之后部分CSS不生效问题的解决办法
    用vue开发的时候,本地开发所有的样式都能生效,但是打包之后就会有部分样式失效,且在浏览器中F12得时候那个属性值并没有变化。 我这边出现的问题是F12走查发现影响的css样式来自s...
    99+
    2022-12-24
    vue打包后css失效 vue打完包起服务css样式没了 vue打包后css有变化
  • vue项目如何打包发布上线
    这篇文章将为大家详细讲解有关vue项目如何打包发布上线,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、开发环境到生产环境的转变项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发...
    99+
    2023-06-25
  • 如何在Linux上进行Golang服务部署
    这篇文章主要介绍了如何在Linux上进行Golang服务部署的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇如何在Linux上进行Golang服务部署文章都会有所收获,下面我们一起来看看吧。一、安装 Golang...
    99+
    2023-07-06
  • Python shell如何在Windows上进行打包?
    Python是一种功能强大的编程语言,是许多开发人员的首选。但是,在将Python应用程序部署到其他计算机时,许多开发人员遇到了困难。在Windows上打包Python应用程序是一项常见的任务,但对于初学者来说可能会感到有些棘手。在本文中,...
    99+
    2023-10-26
    shell 打包 windows
  • 手把手教你如何把vue项目打包后部署到服务器(小白教程)
    一.需要用到的工具 vscode 下载链接:Visual Studio Code - Code Editing. Redefined FinalShell 下载链接:FinalShell官网 二.打包步骤 vscode打开你的vue项目--...
    99+
    2023-08-31
    vscode 编辑器 vue 适配器模式
  • 如何解决vue项目部署上线遇到的问题
    这篇文章将为大家详细讲解有关如何解决vue项目部署上线遇到的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。流程     1.服...
    99+
    2022-10-19
  • 如何解决vue-cli+iview项目打包上线之后图标不显示问题
    这篇文章主要介绍如何解决vue-cli+iview项目打包上线之后图标不显示问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!做vue项目使用的iviewUI库,打包上线之后发现ic...
    99+
    2022-10-19
  • ASP 和 LeetCode:如何在 Unix 系统上打包它们以便部署?
    在 Unix 系统上部署 ASP 和 LeetCode 可能是一项相对复杂的任务,但是如果你知道如何打包它们并将它们部署到服务器上,这项工作就会变得相对容易。在本文中,我们将讨论如何使用 ASP 和 LeetCode 在 Unix 系统上...
    99+
    2023-11-07
    leetcode 打包 unix
  • 如何在LeetCode上使用Java进行打包?
    LeetCode是一个非常流行的在线编程平台,它提供了各种算法题和数据结构题目,供开发人员进行练习和挑战。而Java作为一种广泛使用的编程语言,也是LeetCode上使用最广泛的语言之一。在这篇文章中,我将向您展示如何在LeetCode上使...
    99+
    2023-07-30
    npm leetcode 打包
  • C++如何采用Daemon进行后台程序的部署
    目录一、如何采用Daemon进行后台程序的部署1. 创建子进程2. 终止父进程3. 创建新的会话4. 改变当前工作目录5. 重设文件权限掩码二. 代码示例一、如何采用Daemon进行...
    99+
    2023-05-18
    C++后台程序的部署 C++ Daemon后台程序 c++程序部署
  • 在vue中如何使用webpack打包之后运行文件
    小编给大家分享一下在vue中如何使用webpack打包之后运行文件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.vue中的v...
    99+
    2022-10-19
  • vue项目打包后如何通过百度BAE发布到网上
    小编给大家分享一下vue项目打包后如何通过百度BAE发布到网上,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体的步骤:1,首先...
    99+
    2022-10-19
  • vue中history模式如何打包部署在域名的二级目录配置
    这篇文章将为大家详细讲解有关vue中history模式如何打包部署在域名的二级目录配置,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。最近在做项目,需要把项目部署在域名下的...
    99+
    2022-10-19
  • vue项目打包后如何上传至GitHub并实现github-pages的预览
    这篇文章主要介绍vue项目打包后如何上传至GitHub并实现github-pages的预览,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!vue项目打包后上传至GitHub,并实现gi...
    99+
    2022-10-19
  • vue-cli项目如何根据线上环境分别打出测试包和生产包
    这篇文章主要介绍了vue-cli项目如何根据线上环境分别打出测试包和生产包,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。最近用vue-cli...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作