Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。

将vue项目部署到node服务器上:

一、准备工作

1、先去官网注册账号注册登录之后,看到这个界面:

2、可以看大支持的语言还是很多的 ,我们选择Node.js,跳转到这个界面:

3、下载工具:我们点击I'm ready to start按钮,跳转到这样一个界面,要求我们下载一个Heroku 的CLI 工具,如果你是部署到其他平台,一般也会让你下载一个对应的工具,用于后期的代码提交,这里按照提示下载安装就行了。

4、远程登陆:安装好了之后,打开一个命令行,根据页面上的提示登陆heroku,命令:heroku login,然后输入heroku的账号和密码。登陆成功会有相关的提示语。

然后点击页面下方的 I have installed the Heroku CLI,然后会跳到这个页面:

cone代码:按照页面提示,先进入到一个你要存放代码的文件夹,然后把他的代码克隆下来:git clone https://github.com/heroku/node-js-getting-started.git.

clone完了之后,我们可以看到这个文件夹下多了一个node-js-getting-started文件,进入这个文件夹:cd node-js-getting-started;

二、创建项目

然后点击页面上的I cloned the app source code按钮,然后会进入到一个创建项目教程的页面,按照他给的步骤来做一般是不会出什么问题的,大致走一下这个流程;

1、创建一个应用:heroku create;

上面紫色的那一串就是应用的名字,这个名字是随机生成的,你也可以指定一个名字:heroku create appName.把https://ancient-forest-54677.herokuapp.com/ 在浏览器打开[也可以使用命令heroku open打开],看到以下界面,表明这个应用已经创建好了:

2、然后我们把刚才生成代码push到服务器上去,使用命令:git push heroku master:

看到上面这个界面就表示已经push 完了,然后在命令行输入命令:heroku open,能看到现在界面变成了下面这样:

这表明我们刚才提交的代码已经部署到服务器上了,你看到的这个界面的代码,是生成项目的默认代码。

三、提交自己的代码

关于heroku 的其他一些命令,可以自己看文档,上面教程什么都比较齐全,这里就不再多说了,下来重点说一下怎么把自己的代码部署上去。

1、我们把node-js-getting-started这个文件夹放到sublime 里打开,先研究一下这个目录结构。

这个结构是很简单的了,public文件夹里应该放的是一些静态资源文件,文件夹里放的是页面文件,其他的都是一些配置项。

2、把我们自己的代码放进这个项目里。将之前的那个vue 项目先打包,生成一个dist文件,dist文件里一个index.html文件,这就是我们的视图文件,还有一个static文件,里面放的是就是静态资源文件。

删除views/pages/下的index.ejs文件,将dist文件里的 index.html文件放进pages文件夹里,并把后缀名改成.ejs,将static整个文件夹放进public文件夹里(这一步非常重要);

我们之前那个vue项目有一个写着后台接口的文件,就是server/router.js文件,我们为了区分,在node-js-getting-started文件夹下新建一个routers文件夹,然后将router.js文件放进去;

然后我们在index.js文件里将这个路由引入使用,代码如下:var router = require("./routers/router");

app.use(router);

注:这个代码要写在生成app之后,启动服务器之前。

3、然后我们将代码push到服务器

在node-js-getting-started目录下打开git 命令行工具,然后依次输入以下三个命令:gir add .

git commit -m '这里是你自己添加的提交的信息'

git push heroku master

输入完这个命令后,会看到一个上传进度,直到看到下面这个界面,就表示上传完成了。

vue项目如何放到服务器上,怎么把vue项目放在node服务器上?相关推荐

  1. #项目的编译和发布 #静态发布新浪云 #node服务器发布新浪云 #nodejs服务器部署数据库 #新浪云前后端结合

    一. vue项目的编译和发布 脚手架中有大量的新技术:vue文件,es6模块.. 这些文件语法大部分浏览器无法直接运行 解决:开发好的项目,经过编译,打包,压缩,变成ES5代码部署到服务器 如何:np ...

  2. node将当前文件上传到服务器,以编程方式将文件从node.js上传到另一个Web服务器...

    我需要将文件从node.js应用程序推送到其他地方运行的Web服务器,该服务器通过典型的上载机制接受文件.例如,假设接收服务器有一个网页,这样的形式:以编程方式将文件从node.js上传到另一个Web ...

  3. 图片网站用什么服务器好,网站图片与框架放在不同服务器有哪些优缺点

    如今很多企业线上发展迅速,对网站的要求也越来越高,因此出现分离式网站架构.怎样理解分离式网站架构呢?理解最简单的一种,即将图片与网站架构分开存放. 的确,现在很多企业都采取这样的操作模式,也有可能成为 ...

  4. 两个网站做到同一个服务器,两个网站放在同一个服务器 备案

    两个网站放在同一个服务器 备案 内容精选 换一换 没有,华为云包含企业邮箱服务,具体请参考: https://www.huaweicloud.com/marketplace/activity/mail ...

  5. 赣州物业公司服务器怎么选择需要什么配置档次的服务器

    赣州物业公司服务器怎么选择需要什么配置档次的服务器?       现代化运营的物业公司一般都需要配置服务器.因为现在物业公司都是使用智能物业系统进行现代化管理,物业软件与每个小区业主的手机和家庭门禁系 ...

  6. vue项目如何放到服务器上,Vue项目怎么上传到云服务器

    Vue项目怎么上传到云服务器 内容精选 换一换 本章节以Linux操作系统为例,指导您通过弹性云服务器内网方式连接GaussDB(for Redis)实例.使用内网连接GaussDB(for Redi ...

  7. vue.js打包上传php,vue.js如何打包放到服务器

    vue.js打包放到服务器的方法:1.修改配置"config/index.js"文件:2.在项目路径中找到打包后的文件,然后运行"npm run build": ...

  8. 项目怎么放到服务器里,如何把项目放到服务器上

    如何把项目放到服务器上 内容精选 换一换 欢迎使用华为云开发者工具套件(Python SDK).Python SDK让您轻松编程即可访问云服务.本教程介绍如何安装和使用Python SDK,并提供示例 ...

  9. ssm项目直接加html文件,如何把ssm项目和vue项目部署在云服务器(上)

    如何把ssm项目和vue项目部署在云服务器(上) 如何把ssm项目和vue项目部署在云服务器(上) 一.引入 URL的概念理解 在WWW上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫URL( ...

最新文章

  1. ESX 4 不能使用SSH登录的解决
  2. webpack+vue+vueRouter模块化构建完整项目实例详细步骤-入门篇
  3. BYZ原创天语w806测评--入手2天,总结优点、缺点.
  4. 群策群力:破机房征求灵丹妙药
  5. 刷前端面经笔记(二)
  6. java基础的知识_Java基础知识点(一)
  7. [Flutter] 一些面试可能会问基础知识
  8. Eclipse安装Lombok
  9. gitee reject decline (hook declined)
  10. 干货分享:免费文字转语音工具哪个比较好?
  11. 【JAVA】金额工具类 金额千分位、中文大写金额、英文金额
  12. ShareX+七牛云搭建博客图床
  13. 安卓虚拟摄像头_iPhone 的“第四颗摄像头”位置,为什么给了激光雷达?
  14. 京东“竖亥小车”秒测商品尺寸重量
  15. 多智能体通信:基于通信的多智能体强化学习研究综述
  16. maven打开edge的闪退
  17. 【大学课程自学网站】
  18. 2020-11-30 09:51:55 精确到秒的时间戳
  19. 想哭!我相信“官方”消息,炒币仍然被骗
  20. 关于ArcGIS一运行ArcToolbox就闪退问题的两种可能性和解决方案

热门文章

  1. js 获取当前是这个年份的第几周+获取这周的开始和结束日期
  2. gtsam 学习十一(ISAM2 实践)
  3. CV_shortcomings of the original GAN
  4. greenplum数据库单机部署
  5. 华盛顿大学西雅图 计算机科学 申请条件,华盛顿大学西雅图分校研究生申请条件有哪些?...
  6. Django项目:极致果蔬(一)
  7. 软件版本alpha、beta、gamma等
  8. 04-面向对象之:封装,多态
  9. 【转】我的辛酸奋斗史3/3
  10. 状态栏的工具类(支持多种版本类型)