vue 打包后的文件部署到express服務(wù)器上的方法
vue 簡介
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。
Vue 只關(guān)注視圖層， 采用自底向上增量開發(fā)的設(shè)計(jì)。
Vue 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
vue是目前最流行的前端框架，今天要介紹的是如何利用vue+webpack+express的方式進(jìn)行前后端分離的開發(fā)。
1、首先用vue-cli初始化項(xiàng)目目錄
vue init webpack pro-name cd pro-name && npm install npm run dev
看到127.0.0.1:8080端口出現(xiàn)vuejs的歡迎界面表示成功。
到這里，前端vue的部署就完成了。
2、安裝部署express
npm install express body-parser --save
然后在項(xiàng)目的根目錄添加app.js 作為啟動(dòng)express服務(wù)器的代碼
const express = require('express')
const app = express()
app.use('/',(req,res) => {
res.send('hello express!')
})
app.listen(3000,() => {
console.log('app listening on port 3000.')
})
執(zhí)行：node app.js
打開瀏覽器訪問127.0.0.1:3000，出現(xiàn)“hello express” 者說明express部署成功
3、對(duì)vue進(jìn)行打包
執(zhí)行：npm run build
打包后的文件存放于dist文件夾中，vue經(jīng)過webpack打包之后生成dist文件夾，里面有個(gè)index.html，他是前端頁面和服務(wù)端的對(duì)接頁面。
4、修改app.js
在express中加入app.use(express.static(path.join(__dirname,
'dist')))；app.js 代碼如下：
const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, 'dist')))
app.listen(3000,() => {
console.log('app listening on port 3000.')
})
5、啟動(dòng)express
在啟動(dòng)express之前，需要修改packge.json 里面的配置：
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"server": "nodemon app.js",
"start": "node app.js"
},
然后執(zhí)行：npm run start
此時(shí)就可以通過127.0.0.1:3000訪問到vue的歡迎界面了。
總結(jié)
以上所述是小編給大家介紹的vue 打包后的文件部署到express服務(wù)器上的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue-router的beforeRouteUpdate不觸發(fā)問題
這篇文章主要介紹了vue-router的beforeRouteUpdate不觸發(fā)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue自定義封裝按鈕組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue+element+cookie記住密碼功能的簡單實(shí)現(xiàn)方法
這篇文章主要給大家介紹了Vue+element+cookie記住密碼功能的簡單實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue在頁面右上角實(shí)現(xiàn)可懸浮/隱藏的系統(tǒng)菜單
這篇文章主要介紹了Vue在頁面右上角實(shí)現(xiàn)可懸浮/隱藏的系統(tǒng)菜單,實(shí)現(xiàn)思路大概是通過props將showCancel這個(gè)Boolean值傳遞到子組件，對(duì)父子組件分別綁定事件，來控制這個(gè)系統(tǒng)菜單的顯示狀態(tài)。需要的朋友可以參考下2018-05-05
vue中this.$refs.name.offsetHeight獲取不到值問題
這篇文章主要介紹了vue中this.$refs.name.offsetHeight獲取不到值問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue.js 時(shí)間轉(zhuǎn)換代碼及時(shí)間戳轉(zhuǎn)時(shí)間字符串
這篇文章主要介紹了Vue.js 時(shí)間轉(zhuǎn)換代碼及時(shí)間戳轉(zhuǎn)時(shí)間字符串,需要的朋友可以參考下2018-10-10
這篇文章主要給大家介紹了關(guān)于Vue使用虛擬鍵盤及中英文切換的相關(guān)資料,有時(shí)候在大型觸屏設(shè)備(如雙屏設(shè)備)中往往就沒有鍵盤去操作,所以就需要去建立一個(gè)虛擬鍵盤去操作,需要的朋友可以參考下2023-06-06
這篇文章主要給大家介紹了關(guān)于關(guān)閉eslint檢查和ts檢查的相關(guān)資料,eslint是一個(gè)JavaScript的校驗(yàn)插件,通常用來校驗(yàn)語法或代碼的書寫風(fēng)格,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
vue-cli 3.0 自定義vue.config.js文件,多頁構(gòu)建的方法
今天小編就為大家分享一篇vue-cli 3.0 自定義vue.config.js文件,多頁構(gòu)建的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天被vue中proxy配置困擾了一天,記錄一下,下面這篇文章主要給大家介紹了關(guān)于Vue配置文件中的proxy配置方式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06