node.js快速部署vue代碼詳細步驟
技術(shù)：node.js + express框架
前言
vue代碼打包后生成dist文件，直接打開里面的index.html，頁面是無法正常展示的
所以需要用服務(wù)器部署它們，跟著我一起用node.js快速部署吧！
注：vue打包命令 npm run build
一、快速搭建小型服務(wù)器
1、用npm管理項目
- 新建demo文件夾
- 終端輸入命令
npm init - 取項目名
然后一路回車到底
2、安裝express
npm i express
3、目錄里新建服務(wù)器的主文件 server.js，寫入如下代碼
// 引入express
const express = require('express')
// 調(diào)用express,創(chuàng)建一個app 服務(wù)實例對象
const app = express()
// 配置后端路由
app.get('/person', (req, res) => {
console.log('訪問到了')
// 給客戶端返回東西
res.send({
name: 'lily',
age:18
})
})
// 設(shè)置端口監(jiān)聽
app.listen(5000, (err) => {
if (!err) console.log('服務(wù)器啟動成功了！')
err && console.log(err)
})一個微型的服務(wù)器就搭建起來了
4、啟動服務(wù)器
node server
5、訪問服務(wù)器信息
能正常訪問就代表服務(wù)器配置成功了，注意配置路由的時候，要加‘/’
二、部署前端靜態(tài)資源
1、根目錄下新建一個文件(一般命名為static或public)，把vue打包后的dist目錄里的html、css、js文件放進去
2、server.js中指定靜態(tài)資源位置
app.use(express.static(__dirname+'/static'))
// 引入express
const express = require('express')
// 調(diào)用express,創(chuàng)建一個app 服務(wù)實例對象
const app = express()
// 指定靜態(tài)資源
app.use(express.static(__dirname+'/static'))
// 配置后端路由
app.get('/person', (req, res) => {
console.log('訪問到了')
// 給客戶端返回東西
res.send({
name: 'lily',
age:18
})
})
// 設(shè)置端口監(jiān)聽
app.listen(5000, (err) => {
if (!err) console.log('服務(wù)器啟動成功了！')
err && console.log(err)
})3、訪問靜態(tài)資源
點擊跳轉(zhuǎn)其它頁面，也能正常訪問
這樣，一個vue寫的項目就部署到服務(wù)器上了
如果你設(shè)置的路由器的工作模式是hash模式，那么到這一步就完結(jié)了!！
但是，如果你設(shè)置的路由器工作模式是history模式，跳轉(zhuǎn)到其他頁面，刷新后就會報錯
三、解決路由為history模式的報錯
1、問題
通過主頁點擊跳轉(zhuǎn)到其他頁面時，可以正常顯示
刷新該頁面，就會報 404
2、原因
- 點擊跳轉(zhuǎn)時，不會發(fā)送網(wǎng)絡(luò)請求，前端路由器帶動頁面、url變化
- 但刷新時，會發(fā)送網(wǎng)絡(luò)請求。 把后面的路徑當(dāng)成資源，去請求服務(wù)器，而服務(wù)器下沒有
/home/news這個資源，所以就報錯了 - hash模式時，不會把
#/及后面的路徑當(dāng)成資源，去請求服務(wù)器
3、解決
- 需要后端人員支持，解決刷新頁面服務(wù)端404的問題 --- 要區(qū)分資源是屬于前端路由還是后端路由
- 如果服務(wù)器采用的是node.js可以采用
connect-history-api-fallback中間件來解決 - 它是專門用于在node.js里面去解決history模式404的問題
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)建一個app 服務(wù)實例對象
const app = express()
// 注意：必須寫在指定靜態(tài)資源前
app.use(history())
// 指定靜態(tài)資源
app.use(express.static(__dirname+'/static'))
// 配置后端路由
app.get('/person', (req, res) => {
console.log('訪問到了')
// 給客戶端返回東西
res.send({
name: 'lily',
age:18
})
})
// 設(shè)置端口監(jiān)聽
app.listen(5000, (err) => {
if (!err) console.log('服務(wù)器啟動成功了！')
err && console.log(err)
})
其他解決方法：后端寫正則匹配、nginx...
完結(jié)，撒花!
總結(jié)
到此這篇關(guān)于node.js快速部署vue代碼的文章就介紹到這了,更多相關(guān)node.js部署vue代碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了Node.js實現(xiàn)登錄注冊功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
nodejs發(fā)送http請求時遇到404長時間未響應(yīng)的解決方法
這篇文章主要為大家詳細介紹了nodejs發(fā)送http請求時遇到404長時間未響應(yīng)的解決方法2017-12-12
這篇文章主要介紹了node打造微信個人號機器人的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本文給大家一起探討nodejs下dns的緩存問題，本文給大家介紹的非常詳細，感興趣的朋友一起看看吧2016-11-11
如何優(yōu)雅地在Node應(yīng)用中進行錯誤異常處理
這篇文章主要介紹了如何優(yōu)雅地在Node應(yīng)用中進行錯誤處理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要給大家介紹了關(guān)于NodeJS中的循環(huán)引用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用NodeJS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
使用Node.js實現(xiàn)HTTP 206內(nèi)容分片的教程
這篇文章主要介紹了使用Node.js實現(xiàn)HTTP 206內(nèi)容分片的教程,Node.js是一款用于服務(wù)器端的JavaScript框架,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了node.js連接mysql與基本用法,結(jié)合實例形式分析了nodejs中mysql模塊的安裝、引入、創(chuàng)建連接、sql語句執(zhí)行等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
詳解node Async/Await 更好的異步編程解決方案
這篇文章主要介紹了詳解Async/Await 更好的異步編程解決方案,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家介紹了使用nodeAPI時遇到過異步問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01