1router配置

import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "root",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "home",
    component: HomeView,
 children: [
      {
        path: "homeChild",
        name: "homeChild",
        component: () => import("../components/homeChild.vue"),
      },
    ],
  },
 {
    path: "/about",
    name: "about",
    component: HomeView,
 children: [
      {
        path: "aboutChild",
        name: "aboutChild",
        component: () => import("../components/aboutChild.vue"),
      },
    ],
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

2頁面代碼

  <div id="app">
    <nav>
      <router-link to="/home">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/about/container">Container</router-link>
    </nav>
    <img :src="'./static/1.webp'" alt="img is not show" />
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

3vue.confg.js文件的publicPath改成 '/'

//vue.config.js
const webpack = require('webpack')
module.exports = {
    publicPath: '/',
    outputDir: 'com.csair.oa.newmeetingassistant', //打包文件夾
    lintOnSave: true,
    // transpileDependencies: true,
    // assetsDir: 'static',
    chainWebpack: config => {
        config.module
            .rule('images')
            .set('parser', {
                dataUrlCondition: {
                    maxSize: 40 * 1024 // 4KiB
                }
            })
    },

    //關閉eslint
    devServer: {
        disableHostCheck: true,
        open: true,
        // port: 81,
        host: '0.0.0.0',
        proxy: {
            '^/proxyapi': {
                target: apiHost['local'],
                pathRewrite: {
                    '^/proxyapi': ''
                },
                changeOrigin: true,
              
            },
          
        }
    }
}

1當我在home的時候，圖片可以拿到
2在about的時候，圖片也可以拿到
3但是在home/homeChild的時候，圖片就因為路徑多了一層homeChild就取不到了
4原理：在history模式并且使用 cli4是用publicPath:'./'時，訪問網(wǎng)站根目錄/home時，請求路徑?jīng)]有問題的,因為當前目錄就是根目錄/home，但當訪問了/home/homeChild路由時，他的請求路徑會指向當前路由對應的靜態(tài)文件，比如http://lppwork.cn/home/static/js/manifest.cb27dd1efb79f9ee627b.js,但在該目錄下我們沒有靜態(tài)文件(因為我們后端配置history所用到的connect-history-api-fallback 仍是把請求定位到一個index.html，也就是根目錄的那個,這就相當于在index.html里添加了一個指向 http://lppwork.cn/memo/static/js/manifest.cb27dd1efb79f9ee627b.js的script標簽，而正確的路徑應該是http://lppwork.cn/static/js/manifest.cb27dd1efb79f9ee627b.js或者說是/static/js/manifest.cb27dd1efb79f9ee627b.js， 所以當然取不到資源.

而當只有publicPath:'/'時，不管在哪一個路由，請求的都是根路徑的資源，即都是指向http://lppwork.cn/static/js/manifest.cb27dd1efb79f9ee627b.js (正確)

為什么使用hash路由模式時不會出現(xiàn)這種情況呢？因為hash是模擬路由，并不是真正的路由，所以不管頁面訪問那個路由，實際上都是訪問根路徑的index.html，所以publicPath不管是 / 還是 ./ 都能指向對的資源