Node 只向客户端发送 html 内容，而不是发送整个 Vue 应用程序

Question

我用 CLI 创建了一个新的 vue 项目并想部署它。基于此文档

https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode

我给路由器添加了历史模式。在运行 npm run build 之后，我采用了静态本机 Node 服务器的示例代码

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

const http = require('http')
const fs = require('fs')
const httpPort = 3000

http.createServer((req, res) => {
  fs.readFile('../base/index.html', 'utf-8', (err, content) => {
    if (err) {
      throw err;
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

所以当导航到 localhost:3000 时，vue 项目似乎正确加载

但我有一个空白页面，其中有两个错误

当我点击那些 js 文件时，它会显示 index.html 文件的内容。很明显js是无法理解这个html内容的。我该如何解决这个问题？

Answer 1

服务器不会一次性发送整个vue应用。

当您浏览到 url 时，浏览器从服务器获取 html 文件。
浏览器解析 html 文件。
浏览器检测资产（js、图像、css）。
浏览器请求这些文件。

它从服务器请求这些文件，但您还没有初始化服务器来查找这些文件。

所以，需要添加静态文件。

https://expressjs.com/en/starter/static-files.html

可以参考here

Answer 2

正如@Sukul 之前回答的那样，您只需要提供静态文件，因为您现在只有一个处理程序来处理 HTML 文件（挂载点文档）随附的所有请求及其请求时间*.js 应用程序它期待有效的 javascript 语法而不是它发现 HTML，并且网络选项卡上的错误消息是什么

const http = require('http')
const fs = require('fs')
const nStatic = require('node-static');
var fileServer = new nStatic.Server('./public');

const httpPort = 3000

const controllers = (req,res)=>{
  if(req.url.includes(".")
   return fileServer.serve(req, res);
  else
  fs.readFile('../base/index.html', 'utf-8', (err, content) => {
    if (err) {
      throw err;
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}
}

http.createServer(controllers).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

node-static ref

但是，我强烈建议您尝试使用 express.js

Node 只向客户端发送 html 内容，而不是发送整个 Vue 应用程序

Node only sends html content to the client instead of sending a whole Vue app

javascript

node.js

vue.js

vue-cli

vue-cli-3