Как обслуживать VueJS режим истории на сервере общего хостинга в подкаталоге - PullRequest
Новая
       71

Как обслуживать VueJS режим истории на сервере общего хостинга в подкаталоге

0 голосов
/ 09 февраля 2020

Я искал решение для этого, но все еще не работает. У меня есть приложение 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)

После этого, когда я go на https://www.root.com/sub/. Он отлично показывает компонент Home. Однако, если я введу https://www.root.com/sub/about, он покажет 404 Not Found, но я хочу, чтобы он показал About компонент.

Но странно то, что если я сделаю ссылку для перехода к компоненту About в компоненте Home, то когда я сначала добавлю компонент go к Home, используя https://www.root.com/sub/, и нажму на ссылку до go до About компонента. Оно работает ! Но обновление страницы или ручной ввод маршрута делает ее 404 не найденной снова

Обновление 1: Я прочитал Vue Маршрутизатор , и они сказали редактировать 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'
}

После того, как я это сделаю, перейдет на страницу О будет перемещаться в индекс. html из public_ 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, он перейдет к компоненту 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 вместо папки root

Я что-то упустил где-то ? Пожалуйста, помогите, я использую Hostinger для хостинговой платформы.

1 Ответ

0 голосов
/ 10 февраля 2020

Наконец я нашел способ, может быть, не самый оптимизированный, но он работает 

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