如何在 Vue 中使用 Express

Question

第一次使用 Node js、Express 和 Vue。

我有一个用 vue（不是 vue-app/vue-cli）制作的番茄钟网站，我想上传到 Heroku。该网站在本地使用 Webstorm IDE 可以完美运行，但无法使其与 Express 一起使用。

项目的Github链接：https://github.com/marcelmiro/Pomodoro

这是我的文件的组织方式：

+-- node_modules
  -- vue & express modules
+-- scripts
  -- main.css
  -- main.js (where my vue code is)
  -- bundle.js (me testing how to use a webpack. its not being used atm)
+-- assets
  -- all images
+-- index.html
+-- package.json
+-- Procfile
+-- server.js

server.js：

const express = require('express');
const app = express();
const port = process.env.PORT || 8080;

app.use("/scripts", express.static("scripts"));

app.get('/', (req, res) => res.sendFile(__dirname + "/index.html"));

app.listen(port, () => {
    console.log('Server connected at:',port);
});

所以我可以设法加载 css（虽然不是所有 css 代码），但不能加载 main.js（我的 vue 代码所在的位置）。图片也没有加载。

我该如何解决这个问题？

Answer 1

因为index.html在你的根目录下，你只需要告诉express去那里看；

const express = require('express');
const app = express();
const port = process.env.PORT || 8080;

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

app.listen(port, () => {
    console.log('Server connected at:',port);
});

实际上，您可能希望将源代码与生产代码分开，但这有点超出了这个问题的范围。