Issue with vuejs build process not incorporating relative paths into the final output

I'm encountering a problem trying to run my Vue.js app from the dist folder.

After searching on this site, I came across a helpful thread titled Vuejs, Difficulties to build with relative path, which suggested the following solution:

  1. Create a "vue.config.js" file in the main path of your project

  2. Provide a relative path. For example:

    module.exports = {
        publicPath: './'
    };

I have implemented the above steps as advised. However, when I execute 

npm run build

and inspect the file, it seems like the changes were not applied.

For reference, here are the versions I am using:

"core-js": "^2.6.5",

"vue": "^2.6.10"

If anyone has faced a similar issue or knows a possible solution, I would greatly appreciate your input.

javascriptvue.jsbuild

Answer №1

To modify the public path that webpack constructs, simply insert the following snippet of code into your main.js file.

__webpack_public_path__ = 'custom/path/you/prefer/at/runtime'

Webpack generates a .p variable within your compiled files, initially set to "/". By reassigning this variable as shown above, you can specify any desired prefix, such as "./"

This helpful tip was sourced from https://github.com/vuejs/vue-cli/issues/2945

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

Tips for enabling custom object properties in Chrome DevTools

In my typescript class, I am utilizing a Proxy to intercept and dispatch on get and set operations. The functionality is working smoothly and I have successfully enabled auto-completion in vscode for these properties. However, when I switch to the chrome d ...

javascriptgoogle-chrometypescript

Ajax-powered Datatables

I am a beginner to data tables and I am attempting to retrieve data from a JSON text file (test1.txt). Below is an excerpt of the data present in the file, which contains over 5000 entries: [{"0":"22352442","ID":"22352442","1":"22126303","PARENT":"2212630 ...

javascriptjqueryjsonajaxdatatable

Finding the common dates between two date arrays in Node.js

Looking for help with correctly intersecting matrices while working in nodejs? Trying to compare two arrays to find common elements, also known as an "array intersection." This seems to be a common question, and despite trying various solutions mentioned o ...

javascriptnode.jsarraystypescriptintersection

Encountering a ReferrenceError when utilizing jQuery with TypeScript

After transitioning from using JavaScript to TypeScript, I found myself reluctant to abandon jQuery. In my search for guidance on how to integrate the two, I came across several informative websites. Working with Visual Studio 2012, here is my initial atte ...

javascripttypescript

Inquiries about utilizing setTimeout with backbone.js and effectively managing timeouts

One of the questions I have is related to clearing timeouts using clearTimeout(content.idTimeout) for a specific idTiemout. But how can I clear all timeouts at once? Here is the model I am working with: var ContentModel = Backbone.Model.extend({ URL: "htt ...

javascriptjquerybackbone.js

Shuffle the JSON data before displaying it

Just a heads up, the code you're about to see might make you cringe, but I'm doing my best with what I know. I've got a JSON file with a bunch of questions, here's what it looks like: { "questions": [ { "id": 1 ...

javascriptjqueryarraysjson

What are all the functionalities provided by jquery select?

Currently, I am venturing into testing out a new jQuery plugin. let myPlugin = new MyPlugin(); $(#myPlugin).someFunction(); console.log($(myPlugin)) I'm curious - is there a way for me to see a full list of the available functions/methods for me to ...

javascriptjquery

Having trouble accessing a website that is embedded within an iframe, and experiencing issues with several ajax post requests not functioning properly within the iframe specifically on Chrome

I am currently dealing with a situation where I have two distinct websites, (constructed with PHP) and (also a PHP site). To integrate them, I have embedded site1 inside site2 using an iframe. <iframe src="https://site1.com" seamless width= ...

javascriptphphtmlcookiesiframe

Create an asynchronous method within an object-oriented programming (OOP) class

Presenting my Activity class. export class Activity { _name: string _goIn: boolean constructor(name: string) { this._name = name; this._goIn = false; } isGoIn() { return this._goIn; } setGoIn() { // instructions to asyn ...

javascripttypescriptoop

Fixing a scrolling element within a div located below the screen is my goal, ensuring it remains fixed in place as the user scrolls

I'm facing a challenge that I need help with: My HTML/CSS layout currently looks like this: Screenshot of how my CSS/HTML appears on the screen upon page load: As I scroll down, I encounter a green element: While scrolling down -> Upon further s ...

javascriptjqueryhtmlscrollscreen

Requiring addresses for Google Maps in order to display directions

To display the directions between two addresses based on the chosen transportation mode, I need to pass the addresses to the code in page 2. After the user selects two cities from a Dropdown box on page 1, they will be sent to the code to show their locati ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Steps for configuring jQuery hide(), adding Class, and remove Class for flawless execution

My HTML Code is structured as follows : ... @foreach($hotel as $key=>$value) ... <div class="iteration"> <input type='hidden' value='<?php echo $value['HCode'].'#' ...

javascriptjqueryhtmlajaxlaravel-5

The preflight response does not allow the access-control-request-methods request header field due to restrictions set in the access-control-allow-

I'm facing CORS issues while trying to make a POST request from my website to a remote server. Despite searching online, I couldn't find a solution that fits my specific problem. Below are the parameters for my ajax request: var params = { ...

javascriptjquerypythonajaxcross-domain

Using additional properties when referencing another Mongoose schema

var UserSchema = new Schema({ job : [{ type : mongoose.Schema.Types.ObjectId, experience : String, grade : String, ref: 'Company'}] }); User's profile can include multiple jobs. The process of adding a job to the user is a ...

javascriptnode.jsexpressmongoose

What are some React component libraries compatible with Next.js 13.1?

I'm exploring Next.js and experimenting with version 13.1 and the new app directory. Is it feasible to accomplish this without sacrificing the advantages of server controls? An error message I encountered states: You're attempting to import a c ...

javascriptreactjsnext.js

Display multiple elements within a single component in vuejs

One of the challenges in Vue.js is looping out a number of boxes within the same component. Each box contains a button that reveals more text using the v-on:click directive. The issue arises when all the boxes respond to this event simultaneously. Is ther ...

vue.js

Issue with Bootstrap Table Style When Using window.print();

The color of my Bootstrap table style is not displaying correctly in the print preview using window.print(). Here is a screenshot showing that the table style is not working properly: https://i.stack.imgur.com/eyxjl.jpg Below is the code I am using: < ...

javascriptphpprinting

Integrating individual script into HTML

Imagine you have a file named public/index.html. Additionally, there is another html file called otherScript, which contains only <script> tags with a script inside. How can you include these scripts into your public/index.html file? You intend to ...

javascripthtmlwebpack

Dealing with problems in col-md display on tablet devices

When viewing on Full Screen and mobile, the ranges panel (class="col-md-3") displays correctly. However, on tablet screens, the left column is obscured by the youtube image panel (class="col-12 col-md-9"). I have attempted various adjustments to the div s ...

javascriptbootstrap-4

Reinitializing the CanvasRenderingContext2D transform with resetTransform and harnessing the power

I've encountered an unexpected issue with the Google Closure Compiler in ADVANCED mode, and I'm struggling to understand it: it's renaming the function resetTransform of CanvasRenderingContext2D Unfortunately, I can't directly share th ...

javascripthtml5-canvasgoogle-closure-compiler