如何在子目录中的共享托管服务器上提供 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 组件。

但奇怪的是，如果我在 Home 组件中创建一个 link 导航到 About 组件，然后当我首先使用 [=17= 转到 Home 组件时]，然后单击 link 转到 About 组件。有用！但是刷新页面或者手动输入路由导致404 not found again

更新 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'
}

执行此操作后，转到“关于”页面将导航至 index.html of public_html

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

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

现在，当我输入 root.com/sub/about 查看 About 组件时，它将导航到根目录中的 Home 组件。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/ [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).)*$ / [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]

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

How to serve VueJS history mode on shared hosting server in subdirectory

deployment

web-hosting

subdirectory

vue.js

vue-router