溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue 簡介
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構建用戶界面的漸進式框架。
Vue 只關注視圖層， 采用自底向上增量開發的設計。
Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
vue是目前最流行的前端框架，今天要介紹的是如何利用vue+webpack+express的方式進行前后端分離的開發。
1、首先用vue-cli初始化項目目錄
vue init webpack pro-name cd pro-name && npm install npm run dev
看到127.0.0.1:8080端口出現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.')
})
執行：node app.js
打開瀏覽器訪問127.0.0.1:3000，出現“hello express” 者說明express部署成功
3、對vue進行打包
執行：npm run build
打包后的文件存放于dist文件夾中，vue經過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"
},
然后執行：npm run start
此時就可以通過127.0.0.1:3000訪問到vue的歡迎界面了。
總結
以上所述是小編給大家介紹的vue 打包后的文件部署到express服務器上的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
