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

问题描述 投票:0回答:1

我一直在为此寻找解决方案,但仍然无法正常工作。我有一个带有历史记录模式路由器的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组件中创建了一个导航到About组件的链接,那么当我首先使用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组件时,它将导航到root.com/sub中的Home组件。

更新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作为托管平台。

我一直在为此寻找解决方案,但仍然无法正常工作。我有一个带有历史记录模式路由器的VueJS应用,从'vue'导入Vue从'vue-router'导入VueRouter从'../ views / ...

导入Home
最后我找到了方法,也许不是最优化的方法,但是它可以工作
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]
vue.js deployment vue-router web-hosting subdirectory
1个回答
0
投票
© www.soinside.com 2019 - 2024. All rights reserved.