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服务器上？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。