如何使用 Node + Express 使用 Vuejs 呈现索引页面答案

【问题标题】：How to render index page with Vuejs using Node + Express如何使用 Node + Express 使用 Vuejs 呈现索引页面
【发布时间】：2018-07-24 12:52:01
【问题描述】：

我正在使用 Vuejs + Node 构建一个小型应用程序，但目前必须在 dev 中运行 2 个服务器：

我的节点服务器：nodemon server.js
和 Vuejs 内置脚本：npm run dev 运行 webpack-dev-server

当我尝试部署时，我不知道如何在加载了我的 vuejs 应用程序的情况下呈现 index.html 页面。

在我的服务器上，我只是提供我的 index.html 文件：

app.use(express.static(__dirname + '/'));

Index.html 加载为空白页。

我尝试运行 npm run build 并收到以下消息，但不知道如何从那里启动我的应用程序。

这是我的 index.html 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Startup app</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->

  </body>
</html>

我知道构建的 js 文件没有被注入，但不知道如何做那部分。有人可以帮忙吗？

【问题讨论】：

我遇到了这个问题。你能弄明白吗？

标签： node.js express vue.js vuejs2 ejs

【解决方案1】：

尝试创建一个名为public 的文件夹，然后将您的index.html 放在那里。然后通过以下方式为您的index.html 服务：

app.use(express.static('public'));

【讨论】：

index.html 使用我的示例代码加载得很好，但问题是我无法弄清楚如何在 prod 中注入 vuejs 文件（不运行 npm run dev）

【解决方案2】：

您可以使用 ejs 在服务器中呈现 html 文件，只需创建文件夹 Views 并创建文件 Home.ejs 和 npm i --save ejs 之后在您的服务器中需要 ejs 并创建获取请求以在您的服务器中呈现此文件我遇到了这个问题

app.set('view engine', 'ejs') 
app.get('/', function(req, res){ 
    res.render('Home')})

【讨论】：