Detailed explanation of the difference between Vue cli assets SubDirectory and PublicPath

Recently, I participated in the project of using vue + springBoot without separating the front and back ends, and encountered the problem that dist files can't run in the background after front-end packaging, and the resources under static can't be accessed.

Question 1: We know that the front and back end are not separated from the project, and some static pictures and pages are directly placed under resource/static. Because the front and back end are developed separately, the front end is processed across domains, and the dist file placed in the background is equivalent to local static resources, so there is no need for cross-domain processing, and the path baseURL that introduces cross domains can be blank

const service = axios.create({
    //baseURL: '/appstore',
    baseURL: '',
    responseType: 'json',
    timeout: 5000 // request timeout
  })

Question 2: It is the problem of assetsPublicPath. First, analyze assetsPublicPath and assetsSubDirectory.

Find the build configuration under the config/index. js file and change it to assetsPublicPath: '/dist/'

build: {
  index: path.resolve(__dirname, '../dist/index.html'),
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  // assetsPublicPath: '/',  assetsPublicPath: '/dist/',
}

index: Templates assetsRoot: The path to store the packaged file assetsSubDirctory: Path to store static resources other than index. html assetsPublicPath: Represents the relative address of the referenced resource in index. html after packaging

Under this configuration, ok will be installed

When accessing in the background, add assetsPublicPath address dist, that is, http://localhost: 8080/dist/index. html #