What is the correct way to properly deploy Nuxt.js in SPA mode on a server?

My current project involves utilizing Nuxt.js in Single Page Application (SPA) mode. However, I am encountering difficulties when trying to deploy it on my Apache server. Has anyone else faced this issue before?

I suspect that the problem may be related to trailing slashes in the URL. I attempted to address this by setting DirectorySlash Off in my .htaccess file, but unfortunately, that did not resolve the issue. I also tried

No luck with the following either:

DirectorySlash Off

#eliminating trailing slash    
RewriteCond %{THE_REQUEST_FILENAME}  /(.*)/( |$|?)
RewriteRule ^(.*)/$ $1 [R=301,L]

# adding the slash back internally
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{REQUEST_URI} !/$
RewriteRule ^(.*)$ /$1/ [L]

The current location of my project is . If you click the button (in the section featuring the man on the boat background), you will navigate to and everything seems to function properly. However, upon refreshing the page, some images are missing (such as those in the header).

Interestingly, everything works smoothly on my local Node.js server.

Answer №1

Discovered two methods to achieve that goal: 1. Rather than using href="image.png", opt for href="/image.png", which makes the image path absolute and accessible from all pages. However, this approach may not function properly if the application is not located in the root directory (as in my current situation). 2. Retrieve images from the assets folder using href="@/assets/image.png". For styling and dynamic paths, utilize

:style="{backgroundImage: ``url('${require('@/assets/boat.jpg')}')``}"
.

Trust it proves beneficial to you ^^

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered while attempting to pass a function within the data in React

I've encountered an issue while trying to pass a function called sectionOne and then calling it from another component. The error message I received is quite confusing. Error: Warning: Functions are not valid as a React child. This may happen if you r ...

The children of the KendoUI treeview are showing up as null

Within my KendoUI treeview setup, the main nodes trigger a call to an MVC controller that checks for a nullable ID parameter before utilizing a different model. When accessing the URL: http://localhost:2949/Report/GetReportGroupAssignments The resulting ...

Expression fragment in Thymeleaf

In splitting my templates into head/main/footer parts using thymeleaf, I have found a method to include stylesheets and javascript on certain pages while excluding them from others. This is achieved through the use of fragment expressions outlined here. M ...

Top method for establishing a mysql connection in Express version 4

Recently, I installed node-mysql and started running on express 4. Although I'm new to express, I am eager to learn the best practices for handling database connections. In my current setup, I have app.js var mysql = require('mysql'); //se ...

The Next.js build process encountered an error when building due to an issue with plotly.js (The build failed with a ReferenceError: self is

Whenever I attempt to build the Next.js app for production using the yarn build command, I encounter the following error. Strangely enough, everything works perfectly fine on the development server when using the yarn dev command. The app employs the react ...

Keystroke to activate Ant Design Select and start searching

I'm currently using the 'react-hotkeys-hook' library and have successfully implemented a hotkey that logs in the console when triggered (via onFocus()). My goal now is to use a hotkey that will open a Select component and add the cursor to i ...

Exploring Angular 2 with ng-bootstrap Library

As I delve into learning Angular2, my goal is to incorporate ng-bootstrap into my project. However, I have encountered issues when trying to import ng-bootstrap and create a functional project. Being a novice in this field, I am unsure if the problem lies ...

Instructions for ordering this jQuery script that executes ajax and should return a 'true' value

In my javascript for form validation, I have added a new layer that calls an external function to send an Ajax request with the form validation results. The goal is to receive an email indicating whether the user passed or failed the validation. While cal ...

Adjust the map automatically as the cursor approaches the map's edge in Google Maps API V3

My latest project involved creating a selection tool using the Rectangle shape tool. With this tool, users can easily select markers by drawing a rectangle over them and releasing their mouse to erase the selection (similar to selecting items on a desktop ...

Despite utilizing overflow and wrap properties, HTML lists still fail to display horizontally

Make sure to copy the code and run the HTML file first. For organization, place the JavaScript file in the scripts folder and the CSS file in the styles folder. The issue at hand is that the li elements are not displaying horizontally as intended; they n ...

Uncover the reason behind the application's crash with Titanium

If we encounter non-crashing errors, utilizing LogCatcher can help by pinpointing which Javascript code is causing the issue. However, in the event of a crash, there's no time for logging Javascript errors. In such cases, integrating tools like ARCA ...

What is the best way to effectively clear memory in THREE.js?

After successfully rendering the model, rotating and zooming work perfectly. However, when attempting to clear the scene by clicking the button#clear, issues arise. The expectation is to traverse through the scene, add its children to an array, iterate ov ...

When using Angular, it is important to remember that calling `this.useraccount.next(user)` may result in an error stating that an argument of type 'HttpResponse<any>' cannot be used with a 'Useraccount' balance

When attempting to use this.useraccountsubject(user) to insert information upon login, I encountered an error: ErrorType: this.useraccount.next(user) then Error An argument of type 'HttpResponse' is not allowed against a balance of 'Userac ...

Effective techniques for unit testing in Vue.js

Here's a question that's been on my mind: when it comes to unit testing in Vue.js, there are several different packages available. Vue Test Utils Vue Jest Vue Cypress For enterprise projects, which of these options would be considered best ...

Discover potential routes to nodes using JavaScript

I need assistance displaying all potential node paths in JavaScript: var object = {"metadata":{"record_count":5,"page_number":1,"records_per_page":5},"records":[{"name":"Kitchen","id":666,"parent_id":0,"children":null},{"name":"Jewellery","id":667,"pare ...

Next.js and Material UI - issues with dynamic styles not functioning

I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...

Display fixed information in a separate tab using express and ejs

I have an Express app that is running smoothly with a MongoDB backend, and it's able to render tables with data flawlessly. However, I've encountered an issue when trying to export a table from my database. The exported table looks something like ...

Tips for inserting a footer at the bottom of every page during the conversion process from HTML to PDF

Could use some assistance with converting HTML into a PDF report. In particular, I want the footer to always appear at the bottom of the last page, even if there is minimal content on that page. Any suggestions? I've been utilizing the wkhtmltopdf to ...

Updating React JSX class based on certain conditions without manipulating the actual DOM

When working with jsx react, I am looking to dynamically set a class while keeping another class static. Here is an example of what I would like to achieve: maintaining the type class and having an additional dynamic class change change to either big, smal ...

Utilizing Bootstrap CSS within Vue's scope

I'm attempting to integrate Bootstrap into a Vue component while ensuring that all CSS is scoped. My initial approach was as follows: <style scoped> @import "~bootstrap/dist/css/bootstrap.css"; @import "~bootstrap-vue/dist/bootstrap-vue.css"; & ...