H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】关于webpack部署项目到apache服务器的url重写

用webpack打包的前端代码只有1个index.html实体文件,react-router控制路由。
比如:localhost/index.htmlapache访问的是入口文件:index.html.
但是访问localhost/list,路由由react-router控制,但是apache却会查找项目目录下的list.html文件。
apache找不到该文件,报404错误。
解决的方法,(我找到的是)开启rewrite功能,并写个.htaccess,让所有404的页面都rewrite到index.html

主要步骤:

1: 开启apache rewrite功能:
LoadModule rewrite_module libexec/apache2/mod_rewrite.so

2: 配置apache conf:
<Directory />
   Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride None
    Order deny,allow
    Allow from all 
   AllowOverride All
</Directory>

3:在项目根目录下写个.htaccess文件:
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]

但是我在浏览器端输入localhost/list依旧报404错误。求高手指点,是我找我了方法,还是方法细节有bug。

thx。

——————分割线———————-

有时候灵感就是那么一刹那。
网站通过virtualHost控制,再次看问题,发现一个线索:

 AllowOverride None

查看http-vhosts.conf文件,果然如是。如下修改就可以正确跳转到index.html文件了。

    <Directory />
         Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order deny,allow
        Allow from all
        Require all granted
    </Directory>

ahaha,送给webpack打包的小伙伴:

  new CopyWebpackPlugin([
    {from: {glob: '.htaccess', dot: true}}
  ]),

回答:

我建议最后一行换成这样试试:

RewriteRule ^ /index.html [L,QSA]

如果还不行,建议打开RewriteLog采集下rewrite的时候的日志,根据日志来进行分析。 具体情况具体对待。

回答:

见分割线。

  <Directory />
         Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order deny,allow
        Allow from all
        Require all granted
    </Directory>

回答:

打开cmd cd空格项目拖进去,webpack空格-p编译 将编译后的文件放在apache服务器htdocs文件夹中,继续再cmd中webpack-dev-server发布 然后在浏览器输入apach设置的端口号直接打开。

本文地址:H5W3 » 【Web前端问题】关于webpack部署项目到apache服务器的url重写

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址