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?

typescriptvue.jsiis

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

Inoperative due to disability

Issue with Disabling Inputs: [disabled] = true [disabled] = "isDisabled" -----ts > ( isDisabled=true) Standard HTML disabler disable also not functioning properly [attr.disabled] = true [attr.disabled] = "isDisabled" -----ts > ( isDisabled=true) ...

angulartypescriptdata-binding

Guide to linking two variables in Vue.js

I'm working on a project that combines Laravel with Vue. Right now, I'm passing data from the controller to the view in two variables - users and user_data. How can I link these two variables together and display them using v-for? These two tabl ...

javascriptphplaravelvue.js

How do React Native proxies differ from vanilla React proxies in their functionality?

Trying to retrieve data from an API running locally on port 5000 of my device, I recalled setting the proxy in package.json when working on React web applications: "proxy": "https://localhost:5000" Attempting to fetch information f ...

typescriptreact-nativefetch-api

TypeScript introduces a flexible generic type, Optional<T, Props>, allowing customized props for a specific

In my attempt to develop a type called Optional<T, TProps>, where T represents the initial type and TProps is a union type of properties that need to be optional. As an illustration: type A = Optional<{a: string, b: string}, 'a'&g ...

typescript

Having trouble sending an email using nodejs and mailgun

Before accusing me of asking a duplicate question, I want to clarify that I have already searched for solutions and none of them worked for me. For example, I tried the solution provided in this link: Example of the domain name for mailgun before nodejs? ...

node.jstypescriptnpmmailgun

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 ...

cssreactjstypescriptnext.js

Display or conceal a div element depending on the value selected in Vue.js

I have a Vue.js dropdown and I would like to show or hide my div based on the selected value in the dropdown. The current code is only working for one ID, but I want it to work for all IDs. I want to toggle the visibility of my div based on the option&apos ...

javascriptvue.js

Guide on removing a key from an object in TypeScript

My variable myMap: { [key: string]: string[] } = {} contains data that I need to modify. Specifically, I am trying to remove a specific value associated with a certain key from the myMap. In this case, my goal is to delete value1 from myMap[Key1]. Despit ...

typescriptecmascript-6

Turning a Vue object back into a regular JavaScript object - the step-by-step guide!

Is there a way to revert objects that have been transformed into Vue.js's reactive system back to their original state as normal objects? ...

vue.js

Enhance your React Native experience with IntelliSense recommending react-native/types over react-native

I am trying to bring in <View from react-native, but instead, I am getting react-native/types How can I resolve this issue? This is a new project starting from scratch and I followed the documentation by adding TypeScript as instructed: yarn add --dev ...

typescriptreact-nativeimportintellisense

Convert Time: segment time devoted to the main content from the time dedicated to advertisements

Can anyone assist me with solving a math problem? Let's consider two lists or arrays: Content Array 0-50 = C1 50-100 = C2 AD Array 10-20 = A1 30-60 = A2 80-140 = A3 The desired output should be: 0-10 = C1 10-20 = A1 20-30 = C1 30-60 = A2 60-80 = C ...

javascriptarraystypescript

The textarea fails to maintain the correct size when set to display none

Adjusting Textarea Style overflow:hidden; outline: none; border: none; width: 100%; resize: inherit; When running a foreach loop, notes are retrieved (newRecord) and the text and id of the original notes are extracted from them. To keep it ...

vue.jssymfony

"Utilizing Axios to convey JSON data into Vue Js: A Step-by-Step Guide

After saving my JSON data in a JS file for Vue, I encountered an issue with accessing it and getting my HTML v-for condition to work properly. The method described in the Vue.js documentation didn't help me fetch and execute the JSON data. Could someo ...

jsonvue.jsvuejs2vue-componentvue-router

Tips for creating Junit tests for a CDK environment

As a newcomer to CDK, I have the requirement to set up SQS infrastructure during deployment. The following code snippet is working fine in the environment: export class TestStage extends cdk.Stage { constructor(scope: cdk.Construct, id: string, props: ...

typescriptunit-testingaws-cdk

Utilizing vue-router to create two separate navigation bars where only one link is highlighted as active

In my setup, I have implemented two sections with navigation structured as follows: <ul class="navigation-list"> <li v-for="(route, index) in navRoutes"> <router-link :to="route.path"> <span>{{ route.name }}</span> ...

javascriptcssvue.jsvue-router

Exploring the potential of AssemblyScript in creating immersive WebXR

I have been exploring three.js and webXR for some time now, and I wanted to incorporate it into assembly script. While I know how to make webXR work in TypeScript, I encounter an error when trying to use it in assembly script with the import statement. Her ...

node.jstypescriptwebxrassemblyscript

What could be the reason for v-model not functioning properly?

Embarking on my Vue.js coding journey, I am currently following a straightforward online tutorial. Utilizing the vue-cli, I kickstarted my application and crafted a basic component named Test.vue. Within this component lies a simplistic input control conne ...

javascriptvue.jsvuejs2

Replacing URLs in Typescript using Ionic 3 and Angular

Currently facing some difficulties getting this simple task to work... Here is the URL format I am dealing with: https://website.com/image{width}x{height}.jpg My objective is to replace the {width} and {height} placeholders. I attempted using this func ...

javascriptangulartypescriptionic-framework

Issues with slider functionality in a Next.js application styled with Tailwind CSS

"use client"; import React, { useState } from "react"; const textData = [ { id: 1, text: "Text 1 Description", }, { id: 2, text: "Text 2 Description", }, { id: 3, text: "Text 3 ...

reactjstypescriptnext.jstailwind-csscarousel

Having trouble setting up different PHP versions for individual sites on an IIS server. I attempted to do it myself but encountered an error

I recently attempted to launch a Laravel 9 project on a server after updating the version for a specific site. However, I encountered an error during the process. Can anyone provide suggestions on how to resolve this issue? The web configuration seems to ...

phpiiswindows-servicesweb-config