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
输入完这个命令后, 会看到一个上传进度, 直到看到下面这个界面, 就表示上传完成了.
来源: http://www.css88.com/qa/node-js/12298.html