vue2和vue3部署到服务器子目录为空白页

问题：今天遇到vue项目部署到服务器默认hash没问题但是hhistory为空白的问题。研究了一下找到了答案记录一下

vue项目history模式部署在子路径

项目打包后默认只能部署在服务器根路径，如果想 http://www.xxx.com/demo/ 这种形式

vue3+vite配置方法

• 在 vite.config.ts 中配置：

  export default defineConfig(({ command }) => {
      return {
          // 在这里增加 base 写子路径
          base: '/demo/',  
          resolve: { /*......省略*/ }
      };
  });

  • 然后在router 中增加：

    import { createRouter, createWebHistory } from 'vue-router'
    import HomeView from '../views/HomeView.vue'
    const router = createRouter({
       // 给 createWebHistory 方法传参数配置子路径
      history: createWebHistory(import.meta.env.BASE_URL),
      routes: [
        {
          path: '/',
          name: 'home',
          component: HomeView
        },
      ]
    })
    export default router

    vue2+cli配置方法

    在 vue.config.ts 中配置：

    // vue.config.js
    const vueConfig = {
    // 在这里增加 publicPath写子路径
     publicPath:'/demo/'
     //......忽略其他
    }
    module.exports = vueConfig

    然后在router 中增加：

    export default new Router({
      mode: 'history',
      // 增加bese信息 
      base: process.env.BASE_URL,
      scrollBehavior: () => ({ y: 0 }),
      routes
    })

    vue项目hash模式部署在任意路径

    vue3+vite配置方法

    • 把 vite.config.ts 中的 base 配置值为空或者 ./ ：

      // ......省略其它代码
      export default defineConfig(({ command }) => {
          return {
              base: '',
              //base: './',
          };
      });

      • 把 src/router/index.ts 中路由 history 模式改为 hash 模式：

        import { createRouter, createWebHashHistory } from 'vue-router';
        // ......省略其它代码
        const router = createRouter({
            routes,
            history: createWebHashHistory()
        });

        vue2+vueCli配置方法

        • 在 vue.config.ts 中配置为空或者 ./：

          // vue.config.js
          const vueConfig = {
          // 在这里增加 publicPath写子路径
           publicPath:'./'
           //......忽略其他
          }
          module.exports = vueConfig

          然后在router 中设置hash：

          export default new Router({
            mode: 'hash',
            scrollBehavior: () => ({ y: 0 }),
            routes
          })