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ò)請求。 把后面的路徑當成資源，去請求服務(wù)器，而服務(wù)器下沒有
/home/news這個資源，所以就報錯了 - hash模式時，不會把
#/及后面的路徑當成資源，去請求服務(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中require方法的加載規(guī)則
這篇文章主要介紹了詳解在node.js中require方法的加載規(guī)則,本文一步步解析了require加載規(guī)則,講述了核心的模塊,路徑形式的模塊,第三方模塊等,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了Node.js實現(xiàn)簡單的爬取的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
這篇文章主要介紹了Node.js學習之內(nèi)置模塊fs用法,結(jié)合實例形式詳細分析了node.js內(nèi)置模塊fs的基本功能、用法與相關(guān)操作注意事項,需要的朋友可以參考下2020-01-01
基于NodeJS的前后端分離的思考與實踐（六）Nginx + Node.js + Java 的軟件棧部署實踐
關(guān)于前后端分享的思考，我們已經(jīng)有五篇文章闡述思路與設(shè)計。本文介紹淘寶網(wǎng)收藏夾將 Node.js 引入傳統(tǒng)技術(shù)棧的具體實踐。2014-09-09
身份驗證是Web開發(fā)的重要組成部分,JWT由于其簡單性,安全性和可擴展性,已成為在Web應(yīng)用程序中實現(xiàn)身份驗證的流行方法,在這篇文章中,我將指導(dǎo)你在Node.js應(yīng)用程序中使用MongoDB進行數(shù)據(jù)存儲來實現(xiàn)JWT身份驗證,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了Async/Await替代Promise的6個理由，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下2019-06-06
在我們的日常開發(fā)中經(jīng)常會遇到這種情況,手上有好幾個項目,每個項目的需求不同,進而不同項目必須依賴不同版的NodeJS運行環(huán)境,nvm應(yīng)運而生,這篇文章主要給大家介紹了關(guān)于nvm安裝方法以及安裝后node不能使用解決的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Node.js中下包速度慢問題解決方法,分析了npm切換鏡像源以及nrm工具鏡像源管理相關(guān)使用技巧,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了使用Node.js處理前端代碼文件的編碼問題的方法,Node自帶的相關(guān)類庫處理編碼方面的問題時還是比較得心應(yīng)手的,需要的朋友可以參考下2016-02-02
nodejs模塊nodemailer基本使用-郵件發(fā)送示例(支持附件)
本篇文章主要介紹了nodejs模塊nodemailer基本使用-郵件發(fā)送示例(支持附件)，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03