Vue 3 <router-view> got commented after build using history mode

Question

When I build my Vue project using hash router mode it works perfectly, but when I build it using history mode, it only shows the navbar and commented the <router-view>. I have also configured my apache settings for history mode.

router.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

App.vue

<template>
  <Navbar />
  <router-view />
</template>

<script>
import Navbar from "@/components/Navbar";

export default {
  components: { Navbar },
};
</script>

I could replace the <router-view> on my app.vue with the Home view component directly, it would work. But that defeats the point of using vue router ovbiously. Help me please guys!

Also, here is the server config, I'm using apache and deploying it on a subdirectory called v2

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

Dan Dan · Accepted Answer · 2021-02-21T12:03:27

Since you're serving the app from a subdirectory /v2, you need to configure publicPath accordingly in vue.config.js. Create that file in your project root if it doesn't exist.

Use a conditional publicPath, from the Vue CLI docs which will allow you to serve it properly in both development and production:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/v2/'
    : '/'
}

Setting publicPath changes the value of process.env.BASE_URL used in the router's history property.

Vue 3 <router-view> got commented after build using history mode

1 Answers