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

React Native's npm start seems to freeze at the "Starting Packager" stage

Having an issue with my react native app created using create-react-native-app. Initially, npm start was running smoothly. However, now it gets stuck at Starting Packager. A couple of days ago, I tried deleting the node_modules folder and reinstalling npm ...

node.jsreact-nativenpmwatchman

Using JavaScript, the list of items (images) will be displayed and placed into HTML panels

Below is the layout structure on my website: <div class="panel-heading"><h3 class="panel-title">Suggestions</h3></div> <div class="panel-body"> <div class="col-md-7"> <h3><span class= ...

javascriptjquerycsstwitter-bootstrap

Load data asynchronously using a promise in select2

Is there a way to load options for select2 asynchronously without using ajax requests? I want to retrieve values from a promise object instead. Currently, my code loads data in the query function, but this means that it queries the data with every keystrok ...

javascriptangularjsjquery-select2promise

What is the best way to save characters from different languages into variables?

I created an application that reads words from a TXT file and stores them in a database. The issue arises when I encounter words from other languages that contain non-English characters, resulting in the following problem: Is it possible to store these ch ...

javascriptnode.js

What is the best way to input an argument into my Javascript code using the command line?

Whenever I run my JavaScript file called "login.js" from the command line using "node login.js", I find it necessary to manually edit the URL inside the file if I want to change it. It would be more convenient for me if I could pass the URL as a command l ...

javascriptnode.jscommand-linepuppeteer

Unable to open browser using BrowserSync or live-server

Lately, I've been using live-server with VS Code to debug my web pages. Everything was working perfectly fine until one day, it suddenly stopped functioning. It seemed strange to me so I reinstalled Nodejs, but that didn't solve the problem. The ...

node.jsnpmvisual-studio-codebrowser-syncnpm-live-server

Is there more to AJAX than just fetching a JSON file?

I am in need of using AJAX to achieve my goal. My aim is to have the content of specific subpages displayed in the HTML markup below when a particular link in a list is clicked. This data can be readily accessed from the database via the CMS's API (I ...

javascriptphpjsonajaxprocesswire

What are some effective techniques to optimize this node.js code and eliminate redundancy?

I am currently in the process of setting up a basic template for my demonstration project and writing my first node.js program. The piece of code below is functioning properly for my initial test, but it contains duplicated sections - Getting connection, E ...

javascriptnode.jsazure-bot-service

Automatically change and submit an <input> value using jQuery

I have been working on a prototype to enable users to access all the data associated with a visualization. The idea is that they would click on a specific point, triggering a modal to appear, and within that modal, a table would dynamically filter based on ...

javascriptjquerybootstrap-4datatables-1.10

Having difficulty finding a compatible version for gatsby-cli@next. No matching version available

I tried to install gatsby by running the command below with and without sudo, but I encountered errors. npm install --global gatsby@next gatsby-cli@next Here's what the errors look like. npm ERR! code ETARGET npm ERR! notarget No matching version foun ...

linuxubuntunpminstallationgatsby

Can we enhance this JavaScript setup while still embracing the KISS principle (Keep it simple, Stupid)?

I have completed the following tasks: Ensured all event handlers are placed inside jQuery DOM ready to ensure that all events will only run Defined a var selector at the top of events for caching purposes Please refer to the comments below for what I be ...

javascriptjquerydesign-patterns

Navigating through arrays in JavaScript - optimizing performance

I've noticed this code snippet used in various places: for (var i = 0, len = myArray.length; i < len; i++) { } I understand that this is caching the length of the array. Recently, I encountered this alternative approach: var len = myArray.le ...

javascriptarraysperformance

"An error has occurred stating that the header is not defined in

It is a coding issue related to payment methods. The headers type is undefined in this scenario, and as a newcomer to typescript, pinpointing the exact error has been challenging. An error message is indicating an issue with the headers in the if conditio ...

javascriptreactjstypescriptapipayment

Resolve the infinite loop issue in Vue.js

I am attempting to verify each comment and reply made by the user, checking if the comment was posted more than 30 minutes ago in order to restrict editing capabilities. However, my current implementation is not functioning correctly and I am encountering ...

vue.js

What is the proper way to use AJAX for sending data through a POST request?

Check out my Fiddle Currently, I am in the process of learning AJAX through a tutorial and so far, I have managed to retrieve the desired data and display it on the DOM quite effortlessly. However, I have encountered some difficulties when attempting to ...

javascriptjqueryajax

I'm sorry, but it seems like the command "express" cannot be

After successfully installing node and npm, I encountered an issue when trying to install express using the command npm install -g express: The terminal displayed: zsh: command not found: express. Various attempts to add paths in my .zshrc file did not r ...

node.jsexpressnpm

Ways to select elements from an array of objects based on date

I'm currently working on a task that involves filtering an array of objects to find the ones closest to today. Unfortunately, I encountered an issue where the code is returning dates in June instead of May. Here's the snippet of code I've be ...

javascriptarrays

The message vanishes upon refreshing the page

I've developed a socket.io web app. When I click on the button to send a message, the message appears briefly but disappears when the page refreshes unexpectedly. How can I prevent this random refreshing and ensure that socket.io saves my messages? B ...

javascriptnode.jssocket.io

Jenkins is unable to locate the module, '@babel/plugin-proposal-private-property-in-object' (0:undefined) for React

An Error in Jenkins identified within the console.log terminal 13:29:56 A Syntax error has occurred: [BABEL] /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/src/index.js: Unable to locate module '@babel/plugin-proposal-priva ...

reactjsjenkinsnpmbabeljscraco

Retrieving the chosen value when there is a change in the select tag

Building a shop and almost done, but struggling with allowing customers to change product quantities in the cart and update prices dynamically. I've created a select-tag with 10 options for choosing quantities. I'd like users to be able to click ...

javascriptjqueryhtmlselect