[Solved] Vue item packaging error: Failed to load resource: the server responded with a status of 404 (Not Found)

After NPM run build is executed, a dist folder will be generated, index.html will be opened, and an error will be reported on the console

As shown in the figure below:

This is because the correct path cannot be found, resulting in an error.

Solution:

1. In the root directory, create a new vue.config.js file. Of course, if any, ignore this item;

2. In vue.config.js, change publicpath: “/” to   Publicpath: “. /”, then repackage and NPM run build.

publicPath: “/”          =====>>>>>>>>       publicPath: “./”

For the location of writing, you can refer to the following code:

module.exports = {
  devServer: {
    port: 8080,
    open: true
  },
  lintOnSave: false,
  publicPath: "./",
  outputDir: "dist",
  assetsDir: "static",//Set the directory where the static resources (js, css, img, fonts) generated by the package will be placed.
  indexPath: 'index.html'//Used to set the storage location of the index.html file generated by the package
}

Read More: