How can I eliminate the extra '/' in all links when building with webpack and vue?

I have a question that might seem silly to some, but it's really frustrating me. I am currently working on a project using Vue with vue-cli.
this is the webpack build result

<!DOCTYPE html>
 <html>
  <head>
  <meta charset=utf-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <title>media-belajar</title>
  <link href=/static/css/app.cca059254702f9ed953b7df749673cf4.css rel=stylesheet>
  </head>
<body>
 <div id='app'></div>
  <script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
  <script type=text/javascript src=/static/js/vendor.2420502e2b2c7f321d64.js></script>
 <script type=text/javascript src=/static/js/app.f16ac5c624284d30f5af.js>   </script>
</body>

</html>

Every link has an extra '/' before 'static', causing the assets not to load.

Answer №1

In accordance with the information provided in the attached document, it is now suggested to utilize publicPath instead of baseUrl:

// vue.config.js
    module.exports = {
        publicPath: ''
    }

Personally, I encountered 404 errors while hosting a Vue application in IIS, and implementing the aforementioned file/code effectively resolved these issues.

Answer №2

To adjust the assetsPublicPath setting, simply go to your /config/index.js file.

Change this line: assetsPublicPath: '/'

To: assetsPublicPath: ''

By making this adjustment, you will eliminate the leading forward slash.

Answer №3

To ensure proper configuration in your project, make sure to create a file named vue.config.js in the root directory and add the following code:

// vue.config.js
module.exports = {
    baseUrl: ''
}

For further information, visit the Vue documentation

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

Implementing Vue 2.0 server-side rendering with a template embedded within the #app container

Looking to implement server-side rendering? Check out this resource: ssr.html However, what if we want to specify the template directly inside the <div id="app"></div> in the HTML file itself, rather than in the Vue instance template ...

Creating dynamic routes in Angular Router without using a forward slash: a step-by-step guide

I have a routes array set up where I want any route containing "the-" to point to the first component, and all other routes to point to the second component. [ { path: 'the-:param', component: MyComponent }, { ...

The HTML code for the base64 image conversion failed to load

I am facing an issue with handling HTML strings containing base64 image tags generated by Summernote. I have a process in place where I load the image elements, convert them to image blobs, upload them to get the image-url, and then update the src attribut ...

Can these similar functions be combined into a single, unified function?

Currently, I have 3 functions - and more to come soon - that all perform the same task. However, they control different enumerated divs/variables based on which div triggers the mousewheel event. I am wondering if there is a way to condense these very si ...

Accessing props in react-native-testing-library and styled-components is not possible

I defined a styled-component as shown below: export const StyledButton = styled.TouchableOpacity<IButtonProps> height: 46px; width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; height: 46px; ...

limiting the number of HTTP requests within a JavaScript forEach loop

In my current coding situation, I am facing an issue where the HTTP requests are being made simultaneously within a forEach loop. This leads to all the requests firing off at once. const main = async () => { items.forEach(async (i: Item) => ...

The number field is persisting with its content even after submitting, while the other fields successfully clear up

I am facing an issue where all fields clear up after submission except for the number field. I would appreciate any help on why this is happening and how to fix it. Thank you. Textfield number: const [number, setNumber] = useState(""); const han ...

Issue persists with Component functionality in IE 11 despite the implementation of Polyfill

Just starting to explore VueJS and attempting to make some code I discovered online work with Quill integrated into Vue. Everything runs smoothly on Chrome, but I'm struggling to get it to function properly in IE 11. I've experimented with polyf ...

Deactivating the submit button after a single click without compromising the form's functionality

In the past, I have posed this question without receiving a satisfactory solution. On my quiz website, I have four radio buttons for answer options. Upon clicking the submit button, a PHP script determines if the answer is accurate. My goal is to disable t ...

Guide on integrating a JavaScript file for user scripts into a Chrome extension

Lately, I've been working on creating user scripts for Chrome that can operate without relying on Tampermonkey. Recently, I integrated a third-party extension (a userscript js) into my Chrome extensions: // ==UserScript== // @name "job changer" ...

Encountered a syntax hiccup in my PHP and JavaScript codes

Below is my PHP code snippet: echo ("<td><img src='edit.jpg' width='20' alt='Edit' title='EDIT DATA' onClick=\"swipe2('" + . mysql_result($result, $i, 'no'). + '');'style= ...

What is the best way to monitor multiple properties within a Vue component?

I'm facing a challenge in updating the Vue component property, station, whenever certain other properties are updated. Since computed properties are synchronous and this task involves an API request, I couldn't make it work as a computed property ...

Locate an available space within a 3x3 grid designed in Silverlight

For the past three days, I've been tackling this challenge and still haven't found a solution. Essentially, my goal is to replace a clicked Ellipse with the only empty spot on a 3x3 checkerboard. At runtime, 8 out of the 9 squares are occupied b ...

Disabling JavaScript for a particular page using Selenium:

My current challenge involves navigating to a webpage, locating a link to another page within it, and proceeding to that link without using javascript. One approach I've considered involves the following method: options = Options() options.add_exper ...

"Trouble with socket.io: events failing to dispatch to other users within the

Currently, I am investigating the behavior of a basic socket.io application. To test this, I have two tabs representing different users, and I am checking if one user receives events triggered by the other. Surprisingly, neither frontend receives the event ...

Error in Three.js: The XLoader in THREE library is not recognized as a constructor

After some research, I decided to explore the possibility of importing a DirectX Model and stumbled upon this XLoader. However, despite my best efforts, I am unable to initialize it successfully. As someone who prefers linking directly to libraries for eas ...

need to include three elements on a single page

In my current project, I am working with 3 components. One component is already being displayed on the page and now my goal is to integrate the other two components with this existing one. Below is the code snippet: <template> <component v-bind:i ...

`Obtaining an array of selected values from a deeply nested JSON object`

Looking to extract specific key values from a nested JSON object based on the boolean value of another key. In this case, I need the "name" key values for items where the "checked" key is true, and return them in a result array. Here is an example of the ...

Enhancing JSON Objects in AngularJS with Custom Properties and Calculations

Hello, I'm still getting the hang of angularjs and could use some guidance. I have a Rest service that provides data on saleItems when a get request is made, as shown below: saleItems = [ { "id": 236, "variant": "Oval Holder", "mrp": "6 ...

Issues with CSS background colors

I am in the process of streamlining my CSS code by consolidating repetitive elements and removing unnecessary lines (I am currently enrolled in a mobile apps course that emphasizes creating web-based hybrid applications using HTML5, CSS, and JavaScript, he ...