vue 打包后的文件部署到express服務器上的方法
vue 簡介
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進式框架。
Vue 只關(guān)注視圖層， 采用自底向上增量開發(fā)的設(shè)計。
Vue 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。
vue是目前最流行的前端框架，今天要介紹的是如何利用vue+webpack+express的方式進行前后端分離的開發(fā)。
1、首先用vue-cli初始化項目目錄
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
然后在項目的根目錄添加app.js 作為啟動express服務器的代碼
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、對vue進行打包
執(zhí)行：npm run build
打包后的文件存放于dist文件夾中，vue經(jīng)過webpack打包之后生成dist文件夾，里面有個index.html，他是前端頁面和服務端的對接頁面。
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、啟動express
在啟動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
此時就可以通過127.0.0.1:3000訪問到vue的歡迎界面了。
總結(jié)
以上所述是小編給大家介紹的vue 打包后的文件部署到express服務器上的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本文主要探討了網(wǎng)頁刷新時,原本隱藏的元素會一閃而過的問題,以及嘗試過的解決方案并未奏效,通過實例代碼介紹了如何處理?Vue3?中隱藏元素刷新閃爍問題,感興趣的朋友跟隨小編一起看看吧2024-10-10
Vue的響應式數(shù)據(jù)機制是其核心特性之一,它能夠自動追蹤數(shù)據(jù)的變化,并實時更新相關(guān)的視圖,然而,Vue2中的響應式數(shù)據(jù)機制并非完美無缺,本文將探討Vue2響應式原理及其存在的缺陷2023-08-08
這篇文章主要介紹了解決vuecli3中img src 的引入問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題
這篇文章主要介紹了vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue父組件如何獲取子組件的值,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
vue-router清除url地址欄路由參數(shù)的操作代碼
這篇文章主要介紹了vue-router清除url地址欄路由參數(shù),本文給大家介紹的非常詳細,需要的朋友可以參考下2015-11-11
在運行Vue項目時遇到npm安裝錯誤可使用命令npminstall--legacy-peer-deps解決,若VsCode中無法運行npm命令,則可能是IDE配置未生效,可嘗試重啟電腦或使用cmd命令行直接在項目目錄下運行2024-10-10
這篇文章主要給大家介紹了關(guān)于vue3項目打包與上線的相關(guān)資料,在項目完成得差不多得時候,就可以開始打包部署了,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題
今天小編就為大家分享一篇解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue實現(xiàn)添加與刪除圖書功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10