Vare路由器托管在apache2上

Question

我在apache服务器上托管我的vuejs项目.

1. init项目
2. 设置路由器
3. 构建并托管到apache服务器

const router = new VueRouter({
  routes: Routes,
  // relative: true,
  mode: 'history'
});

这在本地运行良好,但vue路由器在服务器上中断.例

如果我运行http://example.com并转到http://exmaple.com/sub 它工作正常

但如果我刷新页面它会抛出404错误.

错误:

Answer 1

从vue.js文档页面:

使用历史记录模式时,URL将显示为"正常",例如http://oursite.com/user/id.美丽!

但是出现了一个问题:由于我们的应用程序是单页客户端应用程序,如果没有正确的服务器配置,如果用户直接在浏览器中访问http://oursite.com/user/id,则会收到404错误.现在那很难看.

不用担心:要解决此问题,您需要做的就是为服务器添加一个简单的全部回退路由.如果网址与任何静态资源都不匹配,则该网址应该与您的应用所在的index.html页面相同.再次美丽!

阿帕奇

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

Answer 2

这对我有用，因为我的 SPA 位于子文件夹中。将其写入.htaccess文件中。

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

网站文件夹：C:\xampp\htdocs\dist

.htaccess文件路径：C:\xampp\htdocs\dist\.htaccess

学分： https://gist.github.com/Prezens/f99fd28124b5557eb16816229391afee

Answer 3

从 Apache 2.2.16 开始，mod_rewrite 不再需要。FallbackResource只需在<Directory>或配置下使用即可<VirtualHost>。

FallbackResource /index.html

这将为所有未映射到任何内容的 URL 提供 index.html。