摘要： 一個Vue頁面部署在Node Koa服務器上开呐，在html里無法顯示vue data的數(shù)據(jù), 接下來我會演示從發(fā)現(xiàn)問題 > 排查問題 > 解決問題的過程。如果只想知道如何解決問題，直接看解決問題板塊
關鍵字： Node Vue 無法顯示數(shù)據(jù)
問題描述
一個Vue頁面部署在Node Koa服務器上廉嚼，在html里無法顯示vue data的數(shù)據(jù), 但是用瀏覽器直接打開是可以的
重現(xiàn)代碼
npm init -y; npm koa nunjucks
// 目錄結構
app.js
index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet">
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<script>
(function() {
let vm = new Vue({
el: "#app",
data() {
return {
msg: 'Hello'
}
}
})
}())
</script>
</body>
</html>
// app.js
const Koa = require('koa')
const app = new Koa()
const nunjucks = require('nunjucks');
app.use(async (ctx, next) => {
if (ctx.url == "/") {
ctx.response.set('Content-Type', "text/html")
ctx.response.body = nunjucks.render("index.html")
}
await next();
});
app.listen(3000);
console.log('app started at port 3000...');
node app.js
排查問題
-
運行環(huán)境不同
直接用瀏覽器打開可以顯示data里的數(shù)據(jù)，在服務器上不行。所以我換了一個用Phpstudy搭建的PHP服務器, 部署在上面后訪問頁面堡牡，data里的數(shù)據(jù)可以顯示。這時候可以斷定是Node那邊的問題了 -
服務器返回文件的方式
這時候杨刨，我沒有想過要換一個服務器中間件晤柄，如express。因為我看到返回文件用的是nunjucks.render, 我在想會不會是因為這個原因妖胀。于是我換成了Node內置的fs模塊, 問題就解決了if (ctx.url == "/") { ctx.response.set('Content-Type', "text/html") // ctx.response.body = nunjucks.render("index.html") ctx.response.body = fs.createReadStream("index.html") }
解決方案
- 頁面使用
<script>引入Vue.js且用nunjucks返回文件的芥颈，可以考慮將nunjucks.render換成fs.createReadStream - 排查問題策略
flowchat
st=>start: 遇到問題
op1=>operation: 找出與成功例子的不同之處
op2=>operation: 根據(jù)不同之處進行測試，縮小范圍
op3=>operation: 導致這個問題的發(fā)生赚抡，可能有哪些因素爬坑。在范圍尋找這些因素
e=>end: 結束
st->op1->op2->op3
參考資料
《調試九法——軟硬件錯誤的排查之道》
