Issue encountered with Vue.js build configuration not being loaded while running on the build test server

I am working on a Vue 2 project and facing an issue with loading configuration settings from a config.json file.

My router\index.ts file has the line: Vue.prototype.$config = require('/public/config.json')

The config.json file contains important settings needed for initializing Okta.

On my local machine, the public folder is at the same level as src and everything works fine.

However, when the build server creates a build and deploys it to the server, the app fails to load the values from config.json.

Even after trying moving the file to different locations like a public folder off the root or a js\public folder, the issue persists.

It seems that the compiled code is looking in the wrong directory for the config.json file.

I suspect there may be a version of config.js included in the compiled code causing conflicts.

Do I need to modify the build process to resolve this issue?

Answer №1

Here are a couple of suggestions to help resolve the issue you are facing.

INITIAL SOLUTION: Ensure that you specify the correct path to prevent any false reference with either a relative or absolute path. For your specific scenario, the code should resemble the following:

Vue.prototype.$config = require(process.env.BASE_URL + '/public/config.json')

Refer to the documentation for more details: The public folder


ALTERNATE APPROACH: Transfer your config.json file and make sure to reference it from the src directory. The revised code snippet would be as follows:

Vue.prototype.$config = require('~@/json/config.json')

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

Troubleshooting Cross-Origin Resource Sharing Problem in Vue.js Single Page Application and Node.js API

My Node.js Express app is set up with the cors npm package installed. Additionally, there is basic authentication enabled on the nginx server hosting my Node.js app (authentication requires an 'Authorization' key in the headers of each request). ...

Creating a Vue JS project that utilizes both HTTP and HTTPS URLs for improved security

I'm currently utilizing Vue JS with the webpack template and dev mode. I have a question regarding how to configure my server to allow for both HTTPS and HTTP protocols simultaneously. I understand that enabling HTTPS can be done by simply adding "ht ...

Unexpected identifier error: Typescript interface name syntax is incorrect

I am currently learning Typescript and still navigating my way through it. I have extensively searched for a solution to the issue I am facing, but couldn't find one, hence I am seeking help here. The problem lies in a SyntaxError at the interface nam ...

I need a way to call a function in my Typescript code that will update the total value

I am trying to update my total automatically when the quantity or price changes, but so far nothing is happening. The products in question are as follows: this.products = this.ps.getProduct(); this.form= this.fb.group({ 'total': ...

The Vuetify data-table header array is having trouble accepting empty child associations

My Vuetify data-table relies on a localAuthority prop from a rails backend. Everything runs smoothly until an empty child association (nested attribute) is passed, specifically 'county': <script> import axios from "axios"; exp ...

Exploring the directories: bundles, lib, lib-esm, and iife

As some libraries/frameworks prepare the application for publishing, they create a specific folder structure within the 'dist' directory including folders such as 'bundles', 'lib', 'lib-esm', and 'iife'. T ...

Is there a way to inject 'cmd' into the browser for Sentry (@sentry/nextjs package) by using a personalized webpack setup in Next.js?

My package json includes the following dependencies: "webpack": "5.58.1", "@sentry/nextjs": "6.13.3", "typescript": "4.0.5", "next": "11.0.1", After running next build without ...

Is it common for the vuetify main.sass bundle file to have a gzipped size of 30 kilobytes?

Just a quick question: Is the file size considered normal? Will it still contain all component stylings even if removed by treeshaking? Treeshaking is enabled. Any advice would be greatly appreciated! https://i.stack.imgur.com/VKaQQ.png ...

Tips for efficiently querying an array of objects with dynamic search criteria in VueJs3?

I have a search feature that scans through Objects and displays results based on the chosen search parameter (ID, NAME). While searching by ID works perfectly, trying to search by name returns undefined. I'm puzzled as to why ID can be successfully s ...

Guide on importing videojs-offset library

I am working on a component that utilizes video.js and HLS streaming in Angular. The component code is as follows: import { Component, ElementRef, AfterViewInit, ViewChild, Input, EventEmitter, Output } from '@angular/core'; import ...

Typescript - Keeping a log of object keys along with their corresponding key type values

Imagine having the following scenario where you need to create an object with keys that are transformed versions of the original type's values: export type CCDTypes = { AuthorisationCaseEvent: AuthorisationCaseEvent, AuthorisationCaseField: Author ...

I have a quick question: What is the most effective method for creating PDF templates with Angular and .NET 6, specifically for designs that feature heavy

Seeking the optimal solution for creating PDF templates using Angular and .NET 6? Specifically looking to design templates that heavily feature tables. In my exploration of efficient PDF template creation with Angular and .NET 6, I ventured into using pdf ...

Having trouble with the clip-path in d3.js liquid fill gauge

Attempting to integrate the d3.js liquid fill gauge into my angular2 webapp has been a challenge. The clippath functionality seems to be malfunctioning, resulting in no wave being generated at all. https://i.stack.imgur.com/3Bmga.png instead of https://i. ...

Incorrect positioning of arrow in OverlayPanel (PrimeVue)

I have been experimenting with overlay panels in the PrimeVue framework, and I've encountered a peculiar issue that I can't seem to resolve. On the demo page, the arrow is positioned on the left side: https://i.stack.imgur.com/Gn3qe.png Howeve ...

What is the best way to modify the state of an array of objects by applying a filter in Vue 3?

I am currently facing an issue with a component that is listening for an emit and then attempting to filter out a user with a specific userId from the users state. The challenge lies in the fact that assigning filteredUsers to users does not appear to be ...

Ways to bypass browser pop-up blockers when using the window.open function

I am displaying an HTML retrieved from the backend. printHtml(htmlContent) { var windowToPrint = window.open('', '_blank'); windowToPrint.document.write(htmlContent); setTimeout(function () { windowToPrint.document ...

"Exploring the world of Typescript with the Drawflow library

Currently, I am integrating the fantastic Drawflow library created by @Jerosoler (available at: https://github.com/jerosoler/Drawflow) into my PrimeNg project. User @BobBDE has provided typescript definitions for this library here: https://www.npmjs.com/p ...

Angular mistakenly redirects to the local host at port 4200 with a hash symbol

After using this.router.navigate(['newcard']);, the URL loads correctly but then quickly redirects to localhost:4200/#. This is how I am redirecting from the showcard component to the newcard component: <a href="#" class="btn b ...

Differences between tsconfig's `outDir` and esbuild's `outdir`Explanation of the variance in

Is there a distinction between tsconfig's outDir and esbuild's outdir? Both appear to accomplish the same task. Given that esbuild can detect the tsconfig, which option is recommended for use? This query pertains to a TypeScript library intended ...

What is the correct way to utilize window.scrollY effectively in my code?

Is it possible to have a fixed header that only appears when the user scrolls up, instead of being fixed at the top by default? I've tried using the "fixed" property but it ends up blocking the white stick at the top. Adjusting the z-index doesn&apos ...