vue将路由改为history模式下并设置路由base

vue2的方式

是 在传递router配置里添加

// router.js
mode: 'history', // 将路由改为history模式
base:'/acc/'

到这里会发现页面无法访问

// 解决history模式下并设置路由base  页面无法访问的问题 START
// vite.config.ts
  outputDir: path.resolve(__dirname, '../accInvestigation-demo/dist/'),
  assetsDir: './',
  publicPath: '/acc/'

如果 打包时编译报错 ERR! Source and destination must not be the same.
那就可能是assetsDir 路径错误

vue3的方式

// router.ts
// 不再是通过base设置,而是设置createWebHistory的参数
const router = createRouter({
  history: createWebHistory("/aaa"),
  routes,
})

// vite.config.ts
export default ({ mode }) => defineConfig({
  // 设置如下两个属性
  base: '/aaa/',
  publicDir:"./public",
  // ...
})

你可能感兴趣的:(javascript,html,前端)