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

Question

我一直在为此寻找解决方案，但仍然无法正常工作。我有一个带有历史模式路由器的 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零件。

但奇怪的是，如果我创建一个链接以导航到 About Home 组件中的组件，然后当我转到 Home 时组件首先使用 https://www.root.com/sub/ ，然后单击链接转到 About零件。有用 !但是刷新页面或者手动输入路由又会404找不到

更新 1:我读了 Vue Router他们说要编辑 Apachae .htaccess .所以我这样改了，但还是不行:

<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>

这是我的 vue.config.js :

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

在我这样做之后，转到“关于”页面将导航到 public_html 的 index.html

更新 2:我将 .htaccess 更改为:

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

现在，当我输入 root.com/sub/about查看About component ，它将导航到 Home 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 我使用 Hostinger 作为托管平台。

Answer 1

最后我找到了方法，也许不是最优化的但它有效

RewriteEngine On
RewriteBase /
#### PERSISTENT CONTENT ####
DirectoryIndex index.php index.cgi index.html
RewriteCond %{REQUEST_FILENAME} !-f [OR]
RewriteCond %{REQUEST_URI} ^\/(js\/main\.js|css\/(\d+|common|site)\.css)$
RewriteCond %{REQUEST_FILENAME} !-d
#### not match sub module
RewriteRule ^((?!sub).)*$ /$1 [L,QSA]

#### This is for sub module
RewriteEngine On
RewriteBase /sub/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f [OR]
RewriteCond %{REQUEST_URI} ^\/(js\/main\.js|css\/(\d+|common|site)\.css)$
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^((sub).*)*$ /sub/index.html [L,QSA]