欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 打包后的文件部署到express服務(wù)器上的方法

 更新時(shí)間：2017年08月09日 11:00:40   作者：sindlly  
vue是目前最流行的前端框架，今天要介紹的是如何利用vue+webpack+express的方式進(jìn)行前后端分離的開(kāi)發(fā)，下面通過(guò)本文給大家分享vue 打包后的文件部署到express服務(wù)器上的方法，感興趣的朋友一起看看吧

vue 簡(jiǎn)介

Vue.js（讀音 /vjuː/, 類(lèi)似于 view） 是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架。

Vue 只關(guān)注視圖層， 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。

Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

vue是目前最流行的前端框架，今天要介紹的是如何利用vue+webpack+express的方式進(jìn)行前后端分離的開(kāi)發(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

打開(kāi)瀏覽器訪問(wèn)127.0.0.1:3000，出現(xiàn)“hello express” 者說(shuō)明express部署成功

3、對(duì)vue進(jìn)行打包

執(zhí)行：npm run build

打包后的文件存放于dist文件夾中，vue經(jīng)過(guò)webpack打包之后生成dist文件夾，里面有個(gè)index.html，他是前端頁(yè)面和服務(wù)端的對(duì)接頁(yè)面。

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í)就可以通過(guò)127.0.0.1:3000訪問(wèn)到vue的歡迎界面了。

總結(jié)

以上所述是小編給大家介紹的vue 打包后的文件部署到express服務(wù)器上的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論