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

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

75ffc3882a6b4a9dee2f9181d02508f4.png

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

一、准备工作

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

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

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

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

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

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

019d0ae21e6383803ec0c78c80304f1a.png

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

二、创建项目

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

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

3301c4379c34874adee81d5f78cfdab9.png

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

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

950460e3301682963b99acf48c3036fc.png

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

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

三、提交自己的代码

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

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

9670ace9a6a1ea6434fdbcfacbacd5f7.png

这个结构是很简单的了,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

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

6326c76e918478732cc700726b7590a1.png