談談Vue框架中server和client部署方法
- PHPz原創
- 2023-04-17 10:30:021142瀏覽
Vue框架是一款極為受歡迎的JavaScript前端框架，它是由Evan You開發的一款專注於了解更流暢、更有效率的MVVM模式的框架。它的出現讓前端開發人員更方便地開發出具有良好使用者體驗的網路應用程式。本文將會介紹Vue框架的server和client部署方法，以協助讀者更能掌握架構的使用技巧。
一、客戶端部署
Vue框架的客戶端部署相對較簡單，只需將框架檔案引入到HTML檔案中即可，常用的引入方式有兩種：
1.使用CDN引入：
可以直接在HTML文件中使用Vue的官方CDN地址引入Vue.js文件，例如：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.下載原始文件引入：
也可以直接下載Vue的源代碼，然後在HTML文件中引入對應的文件，例如：
<script src="./path/to/vue.js"></script>
引入之後，就可以直接使用Vue框架了。
二、服務端部署
在進行Vue框架的服務端部署之前，需要先安裝相關的Node.js環境。在Node.js環境準備好後，就可以開始進行Vue服務端渲染的開發了。
1.專案建立與設定
在建立專案完成後，需要在package.json 檔案中引入相關的依賴，其中Vue與Vue伺服器渲染相關的依賴如下：
{
"dependencies": {
"vue": "^2.5.0",
"vue-server-renderer": "^2.5.0"
}
}
2.伺服器端程式碼編寫
接下來需要編寫伺服器端程式碼，在Node.js中使用express 框架進行專案搭建，然後在專案中加入Vue伺服器渲染中間件。例如：
const express = require('express')
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()
const app = express()
app.get('*', (req, res) => {
const vm = new Vue({
template: '<div>Hello {{ name }}</div>',
data: {
name: 'Vue SSR'
}
})
renderer.renderToString(vm, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`Server started at localhost:${port}`)
})
以上程式碼簡單地實作了Vue SSR的基本功能，伺服器啟動後，存取頁面時將傳回Vue元件渲染後的頁面內容。
可以看到，在程式碼中使用vue-server-renderer 中的createRenderer() 方法，建立了一個renderer對象，並將該物件作為模板參數傳遞給了renderToString() 方法，負責將Vue元件渲染成HTML字串，並將結果傳回給前端頁面。
3.設定Webpack
在專案中使用了Webpack，需要在Webpack設定檔中設定Vue檔案的編譯規則，例如：
module.exports = {
// ... 其他配置
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}
以上程式碼中使用了vue-loader來Webpack處理.vue 文件，主要是將.vue 類型文件轉換為可運行的js 程式碼。
4.服務端渲染路由配置
在使用Vue SSR時，需要在專案中進行路由配置，以便正確渲染路由請求的內容。例如：
const Vue = require('vue')
const express = require('express')
const renderer = require('vue-server-renderer').createRenderer()
const app = express()
app.get('*', (req, res) => {
const vm = new Vue({
template: `<div>Hello {{ name }}！</div>`,
data: {
name: 'Vue SSR'
}
})
renderer.renderToString(vm, (err, html) => {
if (err) {
return res.status(500).end('Internal Server Error')
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>${html}</body>
</html>
`)
})
})
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`Server started at localhost:${port}`)
})
以上程式碼使用了 express 框架來設定路由，判斷路由請求後渲染整個頁面，並回傳給瀏覽器。
總結
本文簡單介紹了Vue伺服器端和客戶端的基本部署方法，在進行專案開發時需要選擇合適的部署方式。對於僅需要顯示靜態頁面的項目，使用客戶端部署方式即可。對於需要動態顯示資料或SEO改善等項目，建議使用伺服器端渲染部署方式。希望這篇文章能對讀者有所幫助，讓你更能掌握Vue框架的使用技巧。
以上是談談Vue框架中server和client部署方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！