Question

我已经使用 Vue-cli 3 创建了简单的Vue JS应用。我有一个Nginx + php的digitalocean小滴。我的目标是将Vue App托管在同一分支上。我已经尝试过：

向nginx conf中添加某些location /。
使用了以下简单节点服务器：https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

我得到的是Uncaught SyntaxError: Unexpected token <：

有趣的是，当我使用npm run build将生产资源放入dist目录中并使用php -S localhost:8080时，它就像是一个魅力所在。但是，使用简单的节点js服务器的同一件事也会导致上面的屏幕截图显示结果。

我已经连续2天挣扎了。请打扰我。

Answer 1

我在同一个问题上挣扎。问题是当浏览器请求javascript和css文件时，将发送索引文件的内容。

按照此tutorial的步骤3解决。

由于Vue只是一个前端库，因此托管它的最简单方法是做资产之类的事情就是创建简单的Express友好型 Heroku可以用来启动小型Web服务器的脚本。快速阅读如果您还没有，请在Express上。之后，添加快递：

npm install express --save

现在将server.js文件添加到项目的根目录：

// server.js

var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');

app = express();
app.use(serveStatic(__dirname + "/dist"));

var port = process.env.PORT || 5000;
app.listen(port);

console.log('server started '+ port);

此后，由于首先要提供index.html，所以我借用了idea并将以下内容添加到我的代码中（注意，如果请求是html，则使用sendFile）：

app.use((req, res, next) => {
    res.status(404)

    if (req.accepts("html")) {
        res.sendFile(path.join(__dirname + "/dist/index.html"))
        return
    }

    if (req.accepts("json")) {
        res.send({error: "Not found"})
        return
    }

    res.type("txt").send("Not found")
})

Answer 2

有点晚了，但是我已经用它来sendFile index.html进行404响应了。

app.use((err, req, res, next) => {
console.error(err.stack);
res.status(404).sendFile(path.resolve(__dirname, "dist", "index.html"));
})

说明：错误的请求将被定义。 res.status将状态设置为404代码，应用将sendFile解析的index.html。（注意，我同时使用__dirname和path.resolve来构建绝对路径以确保安全。

在生产中部署Vue js似乎更困难

2 个答案: