时间戳

首页 > 解决方案 > vue build 中 index.html 中的自定义（相对）脚本路径

vue.js - vue build 中 index.html 中的自定义（相对）脚本路径

问题描述

我创建了一个 vue 应用程序并将其部署到 openshift 中。我正在容器化它，使用 npm run build 构建它并将静态文件提供给快速服务器以在 openshift 上运行应用程序。它在 openshift 中运行良好。但是现在当我从不同的服务器代理它时，构建后 index.html 中的脚本文件引用的是绝对路径而不是相对路径，因此当通过代理请求时，应用程序会尝试搜索指定的这些文件在代理服务器而不是主机服务器下的该路径下。关于如何解决这个问题的任何建议？

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Test</title>
<link href=/static/css/app.f7ae04f9d2eb7064481.css
    rel=stylesheet>
</head>
<body>
    <div id=app></div>
    <script type=text/javascript
        src=/static/js/manifest.46a3384df62a03.js></script>
    <script type=text/javascript
        src=/static/js/vendor.1c9f4f5eeff1.js></script>
    <script type=text/javascript src=/static/js/app.7fb63c85e086.js></script>
</body>
</html>

添加关于如何提供静态文件的快速代码

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

app = express();
app.use(express.static(path.resolve('dist')));

app.get(/.*/, function(req, res) {
    res.sendFile(path.resolve('dist') + "/index.html");
})

var port = process.env.PORT || 8080;
app.listen(port);
console.log('server started '+ port);
console.log('server started path'+ path.join(__dirname, '/./dist'));

标签： vue.jsvuejs2proxyroutes

解决方案

我不确定这是否完全相同，但是当我将 Vuejs 应用程序部署到 heroku 时，我所做的就是为静态文件提供快速服务。

const express = require('express')
const path = require('path')
const app = express()
var distDir = __dirname + "/dist/";
app.use(express.static(distDir));

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, '/dist/index.html'))
})

const port = process.env.PORT || "8000";

app.listen(port, () => {
    console.log(`Listening to requests on http://localhost:${port}`);
});

如果您在同一应用程序中有服务器和客户端。您应该添加所有路由的拒绝，而不是那些以 开头的路由api，如下所示：

app.get(/^\/(?!api).*$/, function (req, res) {
    res.sendFile(path.join(__dirname, '/dist/index.html'))
})

var apiRouter = require('../../')
app.use('/api', apiRouter)

推荐阅读