时间戳

首页 > 解决方案 > 在生产中部署 Vue js 似乎更难

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

问题描述

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

我得到的是Uncaught SyntaxError: Unexpected token <： 控制台输出

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

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

标签： nginxvue.jsdeploymentvue-cli-3

解决方案

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

按照本教程的第 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 提供服务，所以我借用了这个想法并将以下内容添加到我的代码中（请注意，如果请求是 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")
})

推荐阅读