vue 3.0でWebサイトの#を削除する方法

vueのhistoryモードの実現

はvue 3にある.0でWebサイトの番号

を削除する方法

historyモード

vue 3.0でWebサイトの#番号を削除する方法
最近ではvueでデパートのプロジェクトを書いていますが、当時はページの美しさには要求されていませんでしたので、ルーティングを構成する際にhashモード(デフォルトモード)コードを採用しました.

//router.js
export default new VueRouter({
  base:'/',
  routes: [
    {
      path: '/',
      name: 'index',
      redirect: '/content/home'
    } ]
 })

//vue.config.js  vue3     
module.exports = {
  publicPath: "./", //            
  outputDir: "dist", // where to put static assets (js/css/img/font/...) 
  lintOnSave: true, 
  transpileDependencies: [
    /* string or regex */
  ],
  productionSourceMap: false, //      webpack  . // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => {
  },
 
  configureWebpack:{
    //    'aaa':'bbb' aaa         bbb         
    externals: {
        'vue':'Vue',
        'vue-router':'VueRouter',
        'axios':'axios',
        'element-ui':'Element',
    }
  },
  css: {
    extract: true, //      CSS source maps?
    sourceMap: false,  
    loaderOptions: {}, 
    modules: false
  }, 
  parallel: require("os").cpus().length > 1, 
  pwa: {}, 
  devServer: {
    disableHostCheck: true,
    host: "0.0.0.0",
    port: 12000,
    https: false,
    hotOnly: false, 
  }, 
  //        
  pluginOptions: {
    // ...
  }
};

historyモード
router.jsファイルコードは、mode:‘history’およびbase:’/’を構成する必要がある

export default new VueRouter({
  mode: 'history',
  // base: '/ishow/qian/dist/',
  base:'/',
  routes: [
    {
      path: '/',
      name: 'index',
      redirect: '/content/home'
    }]
)}
  

vue.config.jsは「./」ではなくpublicPath:「/」を構成する必要があります.

//vue.config.js  vue3      
module.exports = {
  publicPath: "/", //            
  outputDir: "dist", // where to put static assets (js/css/img/font/...) 
  lintOnSave: true, 
  transpileDependencies: [
    /* string or regex */
  ],
  productionSourceMap: false, //      webpack  . // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => {
  },
 
  configureWebpack:{
    //    'aaa':'bbb' aaa         bbb         
    externals: {
        'vue':'Vue',
        'vue-router':'VueRouter',
        'axios':'axios',
        'element-ui':'Element',
    }
  },
  css: {
    extract: true, //      CSS source maps?
    sourceMap: false,  
    loaderOptions: {}, 
    modules: false
  }, 
  parallel: require("os").cpus().length > 1, 
  pwa: {}, 
  devServer: {
    disableHostCheck: true,
    host: "0.0.0.0",
    port: 12000,
    https: false,
    hotOnly: false, 
  }, 
  //        
  pluginOptions: {
    // ...
  }
};