VueJS throwing a missing webpack configuration error

Question

VueJS throwing a missing webpack configuration error

Here is an overview of the package.json file for my Vue.js application:

package.json

{
  "name": "vue_app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.13",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  ...
}

<p>After building the Vue app, it generates an index.html file located at:</p>

<p><code>dist/index.html

<body>
    <noscript><strong>We're sorry but vue_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
    ...
</body>


The issue arises when attempting to fetch static files - specifically /js/vendor.be88a6a7.js returns a 404 error. However, calling /static/js/vendor.be88a6a7.js successfully retrieves the file. To resolve this, I had to prepend /static to all static URL paths. Unfortunately, I could not find a webpack.conf file in that directory.

View source code here

javascript webpack vue.js

Answer 1

Answer №1

Vue CLI 3 simplifies the webpack configuration process by generating the config file dynamically at runtime, eliminating the need for users to manually edit it. This abstraction is why you may not see a webpack config file in your project directory.

If you do need to access the webpack config file, you can find it here:

<projectRoot>/node_modules/@vue/cli-service/webpack.config.js

The dynamically resolved file sets output.publiPath to / by default. To view the contents of the webpack config file, use either the vue inspect command in your terminal or navigate to vue ui -> Tasks -> inspect.

To customize the webpack configuration, create a vue.config.js file in the root directory of your project and add the following code:

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

For further information, refer to the following resources:

Answer 2

Vue CLI 3 simplifies the webpack configuration process by generating the config file dynamically at runtime, eliminating the need for users to manually edit it. This abstraction is why you may not see a webpack config file in your project directory.

If you do need to access the webpack config file, you can find it here:

<projectRoot>/node_modules/@vue/cli-service/webpack.config.js

The dynamically resolved file sets output.publiPath to / by default. To view the contents of the webpack config file, use either the vue inspect command in your terminal or navigate to vue ui -> Tasks -> inspect.

To customize the webpack configuration, create a vue.config.js file in the root directory of your project and add the following code:

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

For further information, refer to the following resources:

VueJS throwing a missing webpack configuration error

Answer №1

Similar questions

The TypeScript compiler is unable to locate the module react-scripts within the lerna webpack configuration

Finding the way to locate obsolete or deprecated packages in NPM versions

Eliminating the excessive space underneath the collapsible section when it is expanded

How to load MTL files from local storage using Three.js in Chrome

Using jQuery to retrieve the initial object in an array following an Ajax request

Struggling to display the retrieved data on the webpage

Tailwind.css - a "sticky" element is positioned outside of the parent "wrapper" element

Guiding motion of a parental container using a button

Convert your AS3 code to JavaScript with our specialized compilers

Retrieving JSON information from an external API

Envelop a HTML element within another HTML element with the help of jQuery

struggling to retain data within scope when utilizing localstorage in angular

When the onChange event is triggered, the current value in my text input field disappears in React

Firefox is unable to display SWF files

An issue occurred when attempting to integrate Angular

Pnotify encounters a glitch where the buttons are not displayed when utilized with jquery

Guide on sending a message to a specific channel using Discord.js version 13 with TypeScript

Adjust the color of TextareaAutosize component using mui in React

Having trouble deciphering mathematical formulas while editing content on ckeditor

Is there a way for me to invoke a different function that is located external to