Solution to the problem of blank or wrong path in Vue.js packaged static web page

1. Problem description

The project written with the scaffolding vue-cli uses "npm run build" to package a static web page. Whether it is opened directly or placed in the server, it is blank. Check the log or network request to find the path error.

---

Second, the cause of the problem

The path in the scaffolding configuration file needs to be modified.

---

3. Solutions

1.

Find the "/config/index.js" file, in the build section, change the value of "assetsPublicPath" to "./", "/" is the absolute path of the root directory, and "./" is the relative path of the current directory.

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

2.

The previous method may solve some of the problems. The opening is not blank, but some image resources still cannot be loaded. If you check the wrong URL, you may find that there are two more directories. Then open the "/build/utils.js" file, "if (options. extract)", the "ExtractTextPlugin.extract" parameter list adds "publicPath: '../../'".

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

---

4. Remarks

Because the path involves a lot of situations, such as the url in the web page, the url in the css, the problem is more complicated, so the two solutions provided here are for reference, readers can try, but they do not necessarily meet the problems of the readers, so the problem may not be solved. .