history

root directory

After the routing mode l changes to history, you need to configure url Rewrite on the server, create a web.config file in the root directory and copy it in with the following content

<?xml version="1.0" encoding="utf-8"?>
<configuration>  
<system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Background: URL ('/static/logo.png') no-repeat center/50%; follow path/relative path

<img src="/static/logo.png" alt=""srcset="> Follow paths/and relative paths

<div class="image1" style="background:url('../static/logo.png')"></div>    Heel path / and ../

<img :src="image" alt="" srcset="">      Heel path / and../
data () {
  return {
    image: '../static/logo.png'
  }
}

Subdirectory

For example, I create a folder named app as a project folder in the root directory
After the routing mode l changes to history, you need to rewrite the server configuration url, create the web.config file in the root directory and copy it with the following content. Unlike the root directory, the action tag url/app/index.html

<?xml version="1.0" encoding="utf-8"?>
<configuration>  
<system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/app/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

The publicPatch in the build object under the config index.js file changes from the default / to the name of the subdirectory you deploy / app/

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

router.js needs to be changed to base according to different packaging environments. dev defaults to / pro needs to be based on project paths

var base = process.env.NODE_ENV === 'development' ? '/' : '/app/'

export default new Router({
  mode: 'history',
  base: base,
  routes: []
})

background: url('../../static/logo.png') no-repeat center/ 50%;    Relative path

<img src="../../static/logo.png" alt="" srcset="">    Relative path

<div class="image1" style="background:url('../static/logo.png')"></div>    ../

<img :src="image" alt="" srcset="">    ../
data () {
  return {
    image: '../static/logo.png'
  }
}

Conclusion:
In history mode, the local run must be in the root directory 127.0.0.1:xxxx/# using the above root directory method
Packaging and dispatching to production environment, as appropriate

The root directory and subdirectory have some same introduction methods

It is recommended that the same approach be used directly to accommodate both root and subdirectory deployments

background: url('../../static/logo.png') no-repeat center/ 50%;    Relative path

<img src="../../static/logo.png" alt="" srcset="">    Relative path

<div class="image1" style="background:url('../static/logo.png')"></div>    ../

<img :src="image" alt="" srcset="">    ../
data () {
  return {
    image: '../static/logo.png'
  }
}