Linux LNMP一直以來(lái)都是Web開(kāi)發(fā)人員使用的一種非常穩(wěn)定可靠的技術(shù)棧。而Vue.js則是當(dāng)下非常熱門(mén)的JavaScript框架。將二者結(jié)合使用，可以幫助Web開(kāi)發(fā)人員快速地構(gòu)建現(xiàn)代化的Web應(yīng)用程序。在本文中，我們將會(huì)介紹如何通過(guò)部署Vue.js應(yīng)用程序到LNMP架構(gòu)中來(lái)快速構(gòu)建Web應(yīng)用程序。

VUE.js的安裝

#安裝 nodejs 和npm
sudo apt-get install nodejs npm 
#查看nodejs和npm的版本
node -v
npm -v 
#全局安裝Vue.js
sudo npm install --global vue-cli

安裝LNMP

#Ubuntu系統(tǒng)下安裝LNMP
sudo apt-get update 
sudo apt-get install -y nginx mysql-server php5-fpm php5-mysql
#啟動(dòng)LNMP并設(shè)置開(kāi)機(jī)自啟動(dòng)
sudo service nginx start 
sudo service mysql start 
sudo service php5-fpm start 
sudo update-rc.d nginx defaults 
sudo update-rc.d mysql defaults 
sudo update-rc.d php5-fpm defaults

創(chuàng)建Vue應(yīng)用程序

#創(chuàng)建Vue項(xiàng)目
#project-name 為你的Vue項(xiàng)目名
vue init webpack project-name
#進(jìn)入項(xiàng)目目錄并安裝依賴(lài)
cd project-name
npm install

構(gòu)建Vue應(yīng)用程序

#運(yùn)行開(kāi)發(fā)模式，在瀏覽器中即時(shí)預(yù)覽
npm run dev
#構(gòu)建生產(chǎn)版本
npm run build

部署Vue應(yīng)用程序

#將構(gòu)建后的文件復(fù)制到nginx默認(rèn)網(wǎng)站文件夾下
cp -R dist/. /var/www/html 
#重啟nginx
sudo service nginx restart

使用Vue Router

#安裝Vue Router
npm install vue-router --save
#在main.js中引用
import VueRouter from 'vue-router' 
Vue.use(VueRouter)
#創(chuàng)建路由實(shí)例
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home 
},
{
path: '/about',
name: 'About',
component: About 
}
]
})
#在Vue實(shí)例中使用路由實(shí)例
new Vue({
el: '#app',
router,
template: '',
components: { App }
})

部署Vue-Router應(yīng)用程序

#修改nginx配置文件
sudo vim /etc/nginx/sites-available/default

...
#添加如下配置，并保存修改
location / {
index index.html;
try_files $uri $uri/ /index.html;
}
...

#重啟nginx
sudo service nginx restart

至此，我們已經(jīng)完成了將Vue.js結(jié)合LNMP部署的所有步驟。接下來(lái)你可以在你的服務(wù)器上構(gòu)建出現(xiàn)代化的Web應(yīng)用程序了！