CODEWITHSUNDEEP
javascriptnode.jsvue.jsexpress
Eva Glaude
Eva Glaude

Reputation: 119

404 Error for JavaScript and CSS Files in Vue.js + Node.js App on Live Server

I have a Vue.js + Node.js application that works perfectly on my local server. However, when I deploy it to a live server, I encounter a 404 error for the JavaScript and CSS files. I have verified that the files exist in the correct directories on the live server, and I've adjusted the file paths in the index.html file. Despite these efforts, I still cannot access the files.

Here's the relevant code in index.html:

client/dist/index.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <script type="module" crossorigin src="/assets/index-2b384caf.js"></script>
    <link rel="stylesheet" href="/assets/index-d1b70ef7.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

server/server.js

const express = require('express');
const cors = require('cors');
const routes = require('./routers');


const app = express();

const path = require('path');

// Serve static files from the Vue.js client build
app.use(express.static(path.join(__dirname, '../client/dist')));

app.use(express.json());

app.use(cors());

app.use('/api', routes);

// For any other routes, serve the Vue.js app
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/dist/index.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

I've already checked the following:

The files exist in the correct directories on the live server. The file paths in the index.html file are correct, taking into account the server's directory structure. The server configuration is set up to serve static files from the client directory. I've cleared the browser cache and tried accessing the files in an incognito window. Despite these checks, I still receive a 404 error when trying to access the JavaScript and CSS files.

directory structure

project directory

  1. client (vuejs)
  2. server (nodejs)

Any suggestions or ideas on how to troubleshoot and resolve this issue would be greatly appreciated. Thank you!

Upvotes: 0

Views: 655

Answers (1)

Eva Glaude
Eva Glaude

Reputation: 119

Finally I able to fix the issue. actaully I had wrong configuation on /client/vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  base: '/client/dist/' // added this line
});

after adding base: '/client/dist/' it works like a charm.

Upvotes: 0

Related Questions