vue 路由history模式apache服务器配置

前言

记录一下项目部署，使用路由history模式

流程

1. 配置router/ index.ts路由模式
2. 配置vite.config.js path路径
3. 配置apache 伪静态路由

router/index.ts

const router = createRouter({
    linkActiveClass: 'router-active',
    history: createWebHistory(),  // 此处修改路由模式
    routes: constantRoutes
})

vite.config.js

export default defineConfig({
    base: '/',
    ...
})

如果使用的是vueCli，则是修改vue.config.js

export default defineConfig({
    publicPath: '/',
    ...
})

apache 根目录下新建.htaccess文件

<IfModule mod_rewrite.c>
  RewriteEngine On    #重写引擎
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

以上配完就可以正常访问页面