node.js快速部署vue代碼詳細(xì)步驟
技術(shù)：node.js + express框架
前言
vue代碼打包后生成dist文件，直接打開里面的index.html，頁面是無法正常展示的
所以需要用服務(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，寫入如下代碼
// 引入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('訪問到了')
// 給客戶端返回東西
res.send({
name: 'lily',
age:18
})
})
// 設(shè)置端口監(jiān)聽
app.listen(5000, (err) => {
if (!err) console.log('服務(wù)器啟動(dòng)成功了！')
err && console.log(err)
})一個(gè)微型的服務(wù)器就搭建起來了
4、啟動(dòng)服務(wù)器
node server
5、訪問服務(wù)器信息
能正常訪問就代表服務(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('訪問到了')
// 給客戶端返回東西
res.send({
name: 'lily',
age:18
})
})
// 設(shè)置端口監(jiān)聽
app.listen(5000, (err) => {
if (!err) console.log('服務(wù)器啟動(dòng)成功了！')
err && console.log(err)
})3、訪問靜態(tài)資源
點(diǎn)擊跳轉(zhuǎn)其它頁面，也能正常訪問
這樣，一個(gè)vue寫的項(xiàng)目就部署到服務(wù)器上了
如果你設(shè)置的路由器的工作模式是hash模式，那么到這一步就完結(jié)了!！
但是，如果你設(shè)置的路由器工作模式是history模式，跳轉(zhuǎn)到其他頁面，刷新后就會(huì)報(bào)錯(cuò)
三、解決路由為history模式的報(bào)錯(cuò)
1、問題
通過主頁點(diǎn)擊跳轉(zhuǎn)到其他頁面時(shí)，可以正常顯示
刷新該頁面，就會(huì)報(bào) 404
2、原因
- 點(diǎn)擊跳轉(zhuǎn)時(shí)，不會(huì)發(fā)送網(wǎng)絡(luò)請(qǐng)求，前端路由器帶動(dòng)頁面、url變化
- 但刷新時(shí)，會(huì)發(fā)送網(wǎng)絡(luò)請(qǐng)求。 把后面的路徑當(dāng)成資源，去請(qǐng)求服務(wù)器，而服務(wù)器下沒有
/home/news這個(gè)資源，所以就報(bào)錯(cuò)了 - hash模式時(shí)，不會(huì)把
#/及后面的路徑當(dāng)成資源，去請(qǐ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)建一個(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('訪問到了')
// 給客戶端返回東西
res.send({
name: 'lily',
age:18
})
})
// 設(shè)置端口監(jiān)聽
app.listen(5000, (err) => {
if (!err) console.log('服務(wù)器啟動(dòng)成功了！')
err && console.log(err)
})
其他解決方法：后端寫正則匹配、nginx...
完結(jié)，撒花!
總結(jié)
到此這篇關(guān)于node.js快速部署vue代碼的文章就介紹到這了,更多相關(guān)node.js部署vue代碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解在node.js中require方法的加載規(guī)則
這篇文章主要介紹了詳解在node.js中require方法的加載規(guī)則,本文一步步解析了require加載規(guī)則,講述了核心的模塊,路徑形式的模塊,第三方模塊等,需要的朋友可以參考下2021-06-06
Node.js實(shí)現(xiàn)簡單的爬取的示例代碼
這篇文章主要介紹了Node.js實(shí)現(xiàn)簡單的爬取的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Node.js學(xué)習(xí)之內(nèi)置模塊fs用法示例
這篇文章主要介紹了Node.js學(xué)習(xí)之內(nèi)置模塊fs用法,結(jié)合實(shí)例形式詳細(xì)分析了node.js內(nèi)置模塊fs的基本功能、用法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
基于NodeJS的前后端分離的思考與實(shí)踐（六）Nginx + Node.js + Java 的軟件棧部署實(shí)踐
關(guān)于前后端分享的思考，我們已經(jīng)有五篇文章闡述思路與設(shè)計(jì)。本文介紹淘寶網(wǎng)收藏夾將 Node.js 引入傳統(tǒng)技術(shù)棧的具體實(shí)踐。2014-09-09
Node.js中JWT實(shí)現(xiàn)身份驗(yàn)證的詳細(xì)步驟
身份驗(yàn)證是Web開發(fā)的重要組成部分,JWT由于其簡單性,安全性和可擴(kuò)展性,已成為在Web應(yīng)用程序中實(shí)現(xiàn)身份驗(yàn)證的流行方法,在這篇文章中,我將指導(dǎo)你在Node.js應(yīng)用程序中使用MongoDB進(jìn)行數(shù)據(jù)存儲(chǔ)來實(shí)現(xiàn)JWT身份驗(yàn)證,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了Async/Await替代Promise的6個(gè)理由，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
在我們的日常開發(fā)中經(jīng)常會(huì)遇到這種情況,手上有好幾個(gè)項(xiàng)目,每個(gè)項(xiàng)目的需求不同,進(jìn)而不同項(xiàng)目必須依賴不同版的NodeJS運(yùn)行環(huán)境,nvm應(yīng)運(yùn)而生,這篇文章主要給大家介紹了關(guān)于nvm安裝方法以及安裝后node不能使用解決的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Node.js中下包速度慢問題解決方法,分析了npm切換鏡像源以及nrm工具鏡像源管理相關(guān)使用技巧,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了使用Node.js處理前端代碼文件的編碼問題的方法,Node自帶的相關(guān)類庫處理編碼方面的問題時(shí)還是比較得心應(yīng)手的,需要的朋友可以參考下2016-02-02
nodejs模塊nodemailer基本使用-郵件發(fā)送示例(支持附件)
本篇文章主要介紹了nodejs模塊nodemailer基本使用-郵件發(fā)送示例(支持附件)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03