技術(shù)：node.js + express框架

前言

vue代碼打包后生成dist文件，直接打開(kāi)里面的index.html，頁(yè)面是無(wú)法正常展示的

所以需要用服務(wù)器部署它們，跟著我一起用node.js快速部署吧！ 

 注：vue打包命令 npm run build

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

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

•         新建demo文件夾
•         終端輸入命令 npm init
•         取項(xiàng)目名 

然后一路回車到底

2、安裝express

npm i express

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

// 引入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ě)的項(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)解決
• 它是專門(mén)用于在node.js里面去解決history模式404的問(wèn)題

https://www.npmjs.com/package/connect-history-api-fallback

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()
// 注意：必須寫(xiě)在指定靜態(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)
})

其他解決方法：后端寫(xiě)正則匹配、nginx...

完結(jié)，撒花!

總結(jié)

到此這篇關(guān)于node.js快速部署vue代碼的文章就介紹到這了,更多相關(guān)node.js部署vue代碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論