Custom (relative) script path in index.html in vue build

Question

I created a vue app and deployed it into openshift. I am containerizing it, building it using npm run build and serving the static files to an express server to run the app on openshift. It works fine in openshift. But now when I proxy it from a different server, the script files in index.html after the build refer to an absolute path and not to a relative path, so when coming through the proxy request, the app tries to search for these files specified under that path under the proxy server instead of the host server. Any suggestions on how I could approach this?

    <!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>

Adding my express code on how the static file is served

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'));

Naomi Messing · Accepted Answer · 2020-07-16 00:57:31Z

0

I am not sure this is exactly the same case, but that what I did when I deployed Vuejs app to heroku serving static files to an express serve.

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}`);
});

In case you have server and client in same application. you should add rejex of all routes instead of those that start with api, something like this:

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

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

answered Jul 16, 2020 at 0:57

Naomi Messing

6686 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6591323 Over a year ago

Thats the same thing I am doing in my express server (added my express code now).It works perfectly on openshift. But when I try a proxy server it fails. I see the files mentioned in the script tag in index.html are not accessible by the proxy server and it fails.

Collectives™ on Stack Overflow

Custom (relative) script path in index.html in vue build

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related