node.js怎么快速部署vue代碼

本文小編為大家詳細(xì)介紹“node.js怎么快速部署vue代碼”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“node.js怎么快速部署vue代碼”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

 注：vue打包命令 npm run build

一、快速搭建小型服務(wù)器

1、用npm管理項(xiàng)目

•         新建demo文件夾

•         終端輸入命令 npm init

•         取項(xiàng)目名 

然后一路回車到底

2、安裝express

npm i express

3、目錄里新建服務(wù)器的主文件 server.js，寫入如下代碼

// 引入express
const express = require('express')
// 調(diào)用express,創(chuàng)建一個(gè)app 服務(wù)實(shí)例對(duì)象
const app = express()
// 配置后端路由
app.get('/person', (req, res) => {
    console.log('訪問(wèn)到了')
    //  給客戶端返回東西
    res.send({
        name: 'lily',
        age:18
    })
 })
// 設(shè)置端口監(jiān)聽(tīng)
app.listen(5000, (err) => {
    if (!err) console.log('服務(wù)器啟動(dòng)成功了！')
    err && console.log(err)
})

一個(gè)微型的服務(wù)器就搭建起來(lái)了

4、啟動(dòng)服務(wù)器

node server

5、訪問(wèn)服務(wù)器信息

能正常訪問(wèn)就代表服務(wù)器配置成功了，注意配置路由的時(shí)候，要加‘/’

二、部署前端靜態(tài)資源

1、根目錄下新建一個(gè)文件(一般命名為static或public)，把vue打包后的dist目錄里的html、css、js文件放進(jìn)去

2、server.js中指定靜態(tài)資源位置

app.use(express.static(__dirname+'/static'))
// 引入express
const express = require('express')
// 調(diào)用express,創(chuàng)建一個(gè)app 服務(wù)實(shí)例對(duì)象
const app = express()
// 指定靜態(tài)資源
app.use(express.static(__dirname+'/static'))
// 配置后端路由
app.get('/person', (req, res) => {
    console.log('訪問(wèn)到了')
    //  給客戶端返回東西
    res.send({
        name: 'lily',
        age:18
    })
 })
// 設(shè)置端口監(jiān)聽(tīng)
app.listen(5000, (err) => {
    if (!err) console.log('服務(wù)器啟動(dòng)成功了！')
    err && console.log(err)
})

3、訪問(wèn)靜態(tài)資源

點(diǎn)擊跳轉(zhuǎn)其它頁(yè)面，也能正常訪問(wèn)

這樣，一個(gè)vue寫的項(xiàng)目就部署到服務(wù)器上了

如果你設(shè)置的路由器的工作模式是hash模式，那么到這一步就完結(jié)了!！

但是，如果你設(shè)置的路由器工作模式是history模式，跳轉(zhuǎn)到其他頁(yè)面，刷新后就會(huì)報(bào)錯(cuò)

三、解決路由為history模式的報(bào)錯(cuò)

1、問(wèn)題

通過(guò)主頁(yè)點(diǎn)擊跳轉(zhuǎn)到其他頁(yè)面時(shí)，可以正常顯示

刷新該頁(yè)面，就會(huì)報(bào) 404

2、原因

• 點(diǎn)擊跳轉(zhuǎn)時(shí)，不會(huì)發(fā)送網(wǎng)絡(luò)請(qǐng)求，前端路由器帶動(dòng)頁(yè)面、url變化

• 但刷新時(shí)，會(huì)發(fā)送網(wǎng)絡(luò)請(qǐng)求。 把后面的路徑當(dāng)成資源，去請(qǐng)求服務(wù)器，而服務(wù)器下沒(méi)有 /home/news 這個(gè)資源，所以就報(bào)錯(cuò)了

• hash模式時(shí)，不會(huì)把#/及后面的路徑當(dāng)成資源，去請(qǐng)求服務(wù)器

3、解決

• 需要后端人員支持，解決刷新頁(yè)面服務(wù)端404的問(wèn)題 --- 要區(qū)分資源是屬于前端路由還是后端路由

• 如果服務(wù)器采用的是node.js可以采用connect-history-api-fallback中間件來(lái)解決

• 它是專門用于在node.js里面去解決history模式404的問(wèn)題

1、安裝 connect-history-api-fallback

npm i connect-history-api-fallback

2、使用connect-history-api-fallback

// 引入express
const express = require('express')
// 引入connect-history-api-fallback
const history = require('connect-history-api-fallback');
// 調(diào)用express,創(chuàng)建一個(gè)app 服務(wù)實(shí)例對(duì)象
const app = express()
// 注意：必須寫在指定靜態(tài)資源前
app.use(history())
// 指定靜態(tài)資源
app.use(express.static(__dirname+'/static'))
// 配置后端路由
app.get('/person', (req, res) => {
    console.log('訪問(wèn)到了')
    //  給客戶端返回東西
    res.send({
        name: 'lily',
        age:18
    })
 })
// 設(shè)置端口監(jiān)聽(tīng)
app.listen(5000, (err) => {
    if (!err) console.log('服務(wù)器啟動(dòng)成功了！')
    err && console.log(err)
})

讀到這里，這篇“node.js怎么快速部署vue代碼”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。