Vue路由history模式部署到Apache刷新404错误问题

833 阅读1分钟

1. 如果部署到二级目录,需要配置router的base属性的值为二级目录名

源代码文件路径:项目根目录/src/router/index.js

2. 修改axios的默认配置 baseURL 为项目目录名

	axios.defaults.baseURL=process.env.NODE_ENV==='production'?'/My-Vue/':'';

3. 修改构建时 assetsPublicPath 的属性值为二级目录名

源代码文件路径:项目根目录/config/index.js

2.png

4. 构建项目My-Vue

5. 找到Apache的配置文件(httpd.conf)

找到(#LoadModule rewrite_module libexec/apache2/mod_rewrite.so)并把(#)去掉

找到以下代码修改或添加代码为:

3.png

<Directory "/Library/WebServer/Documents/My-Vue">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    Options FollowSymLinks Multiviews
    MultiviewsMatch Any

    #
    # 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

    #
    # Controls who can get stuff from this server.
    #
    Require all granted
</Directory>

6. 在服务器项目目录下新建(.htaccess)文件,内容为:

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

7. 暗喜吧~