這篇文章主要介紹如何在服務端跑vuejs的項目,如果上一篇教程你成功輸出了hello world，那這一篇更簡單
首先你要有一個已經能在本地跑的基于vuejs的項目,我就以之前寫的仿餓了么的項目為例來部署，如果你還沒有已經寫好的項目，可以用我的這個項目來學習,https://github.com/wmui/vue-elm
這次部署就用最古老最省心的方法，ftp來上傳項目

項目打包

npm run build后會有一個dist目錄，這個文件夾就是我們要部署上線的項目

寫一個小腳本

如果你會點nodejs，腳本就很好理解了，下面是app.js啟動腳本的內容

const fs = require('fs');const path = require('path');const express = require('express');const app = express();// 模擬數(shù)據，api服務var appData = require('./data.json');var seller = appData.seller;var goods = appData.goods;var ratings = appData.ratings;// api接口var apiRoutes = express.Router();
apiRoutes.get('/seller', function(req, res) {
    res.json({
        erron: 0,
        data: seller
    })
});

apiRoutes.get('/goods', function(req, res) {
    res.json({
        erron: 0,
        data: goods
    })
});

apiRoutes.get('/ratings', function(req, res) {
    res.json({
        erron: 0,
        data: ratings
    })
});
app.use('/api', apiRoutes);
app.use(express.static(path.resolve(__dirname, './dist')))

app.get('*', function(req, res) {    const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')
    res.send(html)
})
app.listen(8082);

簡單解釋一下上面的代碼，由于項目需要些數(shù)據，我的模擬數(shù)據都在data.json這個文件里，所有簡單的寫了三個路由,對應獲取到模擬數(shù)據。然后把dist目錄靜態(tài)出來，讀取dist目錄下的index.html（因為是單頁應用，只有這一個html文件）,監(jiān)聽8082端口

我們先在本地把要上傳的文件都準備好：
我們的這個腳本使用了express框架,所以我們可以生成一個package.json，把依賴項添加進去

{
  "name": "vue-elm-dist",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.15.3"
  }
}

完成以上操作，我們要上傳的文件項目大概長這樣大數(shù)據培訓,云培訓,數(shù)據挖掘培訓,云計算培訓,高端軟件開發(fā)培訓,項目經理培訓
新建一個文件夾如elm,把整個項目通過ftp上傳到根目錄www文件夾下

啟動服務

登陸到你的服務端,cd到elm文件夾，執(zhí)行npm install 安裝依賴,然后pm2 start app.js就成功啟動服務了大數(shù)據培訓,云培訓,數(shù)據挖掘培訓,云計算培訓,高端軟件開發(fā)培訓,項目經理培訓
現(xiàn)在通過ip加端口形式能正常訪問，但是如果想通過域名訪問就需要配置nginx映射

nginx 端口映射配置

首先你需要把一個二級域名解析到你的主機ip,比如我使用的elm.86886.wang這個二級域名
配置文件和之前的基本一致

upstream elm {    server 127.0.0.1:8082;
}server {    listen 80;    server_name elm.86886.wang;    location / {        proxy_set_header Host  $http_host;        proxy_set_header X-Real-IP  $remote_addr;  
        proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;        proxy_set_header X-Nginx-proxy true;        proxy_pass http://elm;        proxy_redirect off;
    }
}

我把它命名為elm-8082.conf
然后通過ftp上傳到/etc/nginx/conf.d/目錄下
執(zhí)行sudo nginx -s reload重啟nginx服務器，過個十分鐘就應該能正常訪問了 點擊訪問

標簽: nodejs, linux, vuejs

http://www.cnblogs.com/yesyes/p/7168449.html