vue项目打包上线配置apache

本文使用wampserver 模拟apache环境

1.安装wampserver 64 版本：3.0.6

1.找到安装目录下的httpd.conf文件
D:\wamp64\bin\apache\apache2.4.23\conf\original\httpd.conf

2.释放模块mod_rewrite.so,去掉前面的#就可以了
#LoadModule rewrite_module modules/mod_rewrite.so

3.把以下两处的AllowOverride None 改成 AllowOverride all


    AllowOverride all
    Require all denied


 #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   AllowOverride FileInfo AuthConfig Limit
    #
    AllowOverride all

4.创建.htaccess文件

创建方法
https://jingyan.baidu.com/article/e4d08ffdd24c680fd2f60d95.html

.htaccess文件中加入以下代码：


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

5.把.htaccess文件放入到根目录www文件夹中，
接下来把vue项目打包好的文件也放入根目录中。这样刷新页面就不会就出现404错误了

image.png