What is the reason behind router.base not functioning properly for static sources while running 'npm run build' in Nuxt.js?

Customizing Nuxt Configuration

const BASE_PATH = `/${process.env.CATEGORY.toLowerCase()}/`;
export default {
 router : {
 base : BASE_PATH
 },
}

In addition, there is a static source for an image in the component: 

<img src="/mockups/macbookpro_01.png" />

When running "npm run dev", the image is displayed correctly, but a redirection message appears in the terminal: i [Development] Redirecting from /mockups/macbookpro_01.png to /my/mockups/macbookpro_01.png (router.base specified)

However, when I build using "npm run build", the paths do not update for the image and it becomes unavailable in the build. Can someone guide me on how to configure the build properly?

javascriptvue.jsnpmwebpacknuxt.js

Answer №1

Make certain that the environment variable ENTITY is properly set in the environment where you are running the build.

You can verify if it's an issue with the environment variable by temporarily changing it to:

const ROUTER_BASE = "/my/";

If it functions correctly with the hard-coded base, then there may be an issue with the environment variable being utilized.

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

Expanding properties in a React component based on certain conditions using TypeScript

I am attempting to dynamically expand my component props based on whether a specific prop is included. The goal is to add attributes from an anchor if the href prop is provided, and include attributes from a button if it is not. Is this achievable? Chec ...

javascriptreactjstypescript

Modal form Validation errors remain present upon reopening

Problem Description In my project using Laravel 5.6.7 and Vue.js, I encountered an issue with a modal div that opens and closes on button click. After typing something in the form inside the modal, validation is triggered. If I close the modal and then re ...

vue.jslaravel-5.6

Prevent identical values from being added repeatedly to a table while updating in real-time

Currently, I am facing an issue while running through a loop to extract values from an array. When I add a second value, it duplicates both the new and previous values in the table. For example, adding a row with value 488 works fine: <tr class="exe"& ...

javascriptjquerynode.jsexpress

What is the best way to execute an inline function two times in a row

I'm currently utilizing Gametime.js to create a real-time world chat feature. All messages are kept in a database for storage. Interestingly, PubNub, which is used by Gametime.js, seems to require messages to be sent twice for them to actually go th ...

javascriptfunctionloopspubnub

Issues with sending empty strings to an API in Vue Js

My code below is designed to update data using a Node Js REST API. The remaining field contains an equation using v-model=remaininginst to calculate and store the result in remaininginst. However, when I check the console.log, I am getting NaN empty data s ...

javascriptvue.js

How can I create a dynamic height for a scrollable div?

How can I build a section with a defined height that contains a sticky header (with a dynamic height) and a scrollable body? I want the body to be scrollable, but due to the header's changing height, I'm unable to set an exact height. What should ...

javascripthtmlcss

Manipulating nested arrays using index values in JavaScript

Can someone assist me in sorting a multidimensional array based on the value of the first index? I've tried using a for loop without success. Looking for solutions in JS or jQuery. I want to convert the following array: var pinData = [ ['< ...

javascriptjqueryarrays

Vuetify Autocomplete that allows for adding values not in the predefined list

I am utilizing a vuetify autocomplete component to showcase a list of names for users to select from. In the case where a user enters a name not on the list, I want to ensure that value is still accepted. Check out my code snippet below: <v-autocomplete ...

javascripthtmlnode.jsvue.jsvuetify.js

What steps can be taken to revert this Node.js module to a particular version and ensure it does not automatically update in

While using the Nodemailer module in node.js, I encountered a specific error that read as follows; [Error: Unsupported configuration, downgrade Nodemailer to v0.7.1 or see the migration guide https://github.com/andris9/Nodemailer#migration-guide] A ...

javascriptnode.jsnpmnodemailer

What is the best location for the frontend server code within an application built using create-react-app?

After using create-react-app to create my app, I am looking to log messages in the server console. Any advice on how to achieve this? I attempted adding index.js to the root folder and creating a server folder, but so far it hasn't been successful. ...

javascriptnode.jsreactjscreate-react-app

Issue with Vue JS: running the build command `npm run build` fails to generate the `index.html` file

While executing the command npm run build, I am facing an issue where it does not generate the index.html file in the dist/ directory. The purpose behind needing this index.html file is to deploy my Vue project on AWS EC2 at location (/var/www/html/). Can ...

vue.jsnpm

React: Selecting Component Name Based on Provided Property

My goal is to dynamically load an icon component in React passed as a prop from the parent component. Dashboard (parent): import { Button } from './components'; function App() { return ( <div className="app"> <d ...

javascriptreactjscomponents

worldpay implements the useTemplateForm callback function

My experience with implementing worldpay on my one-page Angular app (Angular 1.x) has been mostly positive. I have been using the useTemplateForm() method to generate a credit card form and retrieve a token successfully. However, I have encountered an issu ...

javascriptangularjspayment-gatewayworldpay

Tips for navigating between tabs without using the next button in Vue.js with vue-form-wizard

I am currently working on creating tabs in vuejs using the vue-form-wizard plugin. I have encountered an issue where I am unable to directly navigate from the first tab to the second or third tab by clicking on the tab for the first time. However, once all ...

vue.js

Is there a way to manage the state of a dictionary nested within a list using React JS?

Below is a snippet of my code. I am attempting to update the state of data (which is contained within datasets) to a value defined by the user. constructor(props) { super(props); this.state={ value:'', set:[], coun ...

javascriptreactjsreact-nativereact-routersetstate

The results of the jQuery selector appear differently in the browser console compared to PhantomJS

What could be causing the discrepancy in results when using the same jQuery selector? Visit this website for reference: See below code involving node.js and phantomjs-node(bridge): phantom.create(function(ph){ ph.createPage(function(page){ p ...

javascriptjquerynode.jsphantomjs

The installation of loopback-connector-mongodb through npm failed

As a novice in node.js, I am eager to learn loopback. My attempt to follow a tutorial on loopback ran smoothly until I encountered difficulties while trying to install the loopback connector for MongoDB. npm install --save loopback-connector-mongodb I ca ...

node.jsmongodbnpmloopbackjsnode-gyp

Submitting a form with JQuery and Ajax technology

I am encountering an issue where I need to submit a form within Ajax and I keep getting a 'form.submit is not a function' error in jQuery. $("#form").validate({ // Define validation rules rules: { type: "required", group ...

javascriptjqueryajaxforms

My webpage is experiencing issues with function calls not functioning as expected

I have created a select menu that is integrated with the Google Font API. To demonstrate how it works, I have set up a working version on JSBIN which you can view here. However, when I tried to replicate the code in an HTML page, I encountered some issues ...

javascripthtmljsongoogle-font-api

Creating an HTML string and then displaying its outer HTML in IE10 can be easily achieved. Just write the

My task is to write an HTML string to an element and then retrieve the resulting outer HTML from that element. This needs to be operational in IE10, latest versions of FF, Chrome, Safari, Android, iOS Safari but does not have to support any older browsers. ...

javascriptinternet-explorerdom