vue.js - 如何在子目录的共享托管服务器上提供VueJS历史记录模式

我一直在为此寻找解决方案，但仍然无法正常工作。我有一个带有历史记录模式路由器的VueJS应用

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

可以说我的域名是https://www.root.com，我想在此应用程序上提供服务https://www.root.com/sub/ （不是子域，而是子目录）。

这是我的服务器目录文件

--public_html
  --sub ( I place the VueJS code here)
  --index.html (html of root.com)
  --.htaccess (file to route)

之后，当我转到时https://www.root.com/sub/。它完美显示了Home组件。但是，如果输入https://www.root.com/sub/about它404 Not Found，则显示，但我希望它显示About组件。

But the strange thing is if I make a link to navigate to About component in the Home component, then when I go to Home component first using https://www.root.com/sub/, and click at the link to go to About component. It works ! But refreshing the page or manually input the route makes it 404 not found again

Update 1: I read in Vue Router and they said to edit the Apachae .htaccess. So I change like this, but it still not working :

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

This is my vue.config.js :

module.exports = {
  publicPath: '/sub/',
  outputDir: 'dist'
}

After I'm doing this, going to About page will navigate to index.html of public_html

Update 2: I change my .htaccess to this :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /sub/
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /sub/$1 [R=301,L]
</IfModule>

Now, when i enter root.com/sub/about to see the About component , it will navigate to the Home component in root.com/sub.

更新3：我的htaccess现在看起来像这样：

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

现在工作正常！但是，现在我在root.com上遇到了问题，所有的css和js文件始终调用/ sub而不是根文件夹中的文件

我在某处缺少什么吗？请帮助，P / s Im使用Hostinger作为托管平台。