在vue3.0中如何去除网址中的#

在vue3.0中如何去除网址中的#号

事情是这样的，最近在用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: {
    // ...
  }
};