Vue.js项目在apache服务器部署问题解决

 更新时间:2022年06月24日 10:39:00   作者:~疆  
本文主要介绍了Vue.js项目在apache服务器部署问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

首先需配置Apache基本设置,如监听端口,放置打包项目的路径等,参考:https://www.jb51.net/article/252857.htm

Vue.js项目在apache服务器部署后刷新404

造成原因

vue 路由的URL有两种模式,一种是 hash,一种是history ,history 模式更好看一些,并且这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

在使用hisory模式时,由于地址并不是真实存在,那么在刷新的情况下,这个会报404错误。

对于这个问题,我们只需要在服务器配置如果URL匹配不到任何静态资源,就跳转到默认的index.html

解决方案

Apache安装目录中打开httpd.conf 文件

将默认注释的以下文件打开:

LoadModule rewrite_module modules/mod_rewrite.so

在当前文件夹中查找:AllowOverride ,默认是 None , 修改成 All。设置AllowOverride All是为了使apache支持.hatccess文件

注意:这个文件夹中有很多AllowOverride,不要修改错了位置

在Apache项目部署文件夹中,添加 .htaccess 文件,内容如下:

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

 重启Apache即可。

注意:这种是把vue打包文件放在Apache根目录下,适用场景不大。

打包文件放在Apache非根目录无法访问的问题

通常我们需要把vue打包项目放在Apache子文件夹中。如子文件夹名为:UASWeb

重启Apache。

访问时,端口后面添上/UASWeb即可。

 到此这篇关于Vue.js项目在apache服务器部署问题解决的文章就介绍到这了,更多相关Vue.js部署apache服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue中this.$nextTick()的理解与使用方法

    Vue中this.$nextTick()的理解与使用方法

    this.$nextTick是在下次dom更新循环之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的dom,下面这篇文章主要给大家介绍了关于Vue中this.$nextTick()的理解与使用的相关资料,需要的朋友可以参考下
    2022-02-02
  • vue+swiper实现左右滑动的测试题功能

    vue+swiper实现左右滑动的测试题功能

    这篇文章主要介绍了vue+swiper实现左右滑动的测试题功能,本文通过实例代码给大介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • 详解vue 计算属性与方法跟侦听器区别(面试考点)

    详解vue 计算属性与方法跟侦听器区别(面试考点)

    这篇文章主要介绍了详解vue 计算属性与方法跟侦听器区别(面试考点),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue3点击侧边导航栏完成切换页面内组件全过程(WEB)

    Vue3点击侧边导航栏完成切换页面内组件全过程(WEB)

    写页面的时候都会用到一些导航栏、点击不同的部分切换不同的页面,下面这篇文章主要给大家介绍了关于Vue3点击侧边导航栏完成切换页面内组件的相关资料,需要的朋友可以参考下
    2023-06-06
  • vue.js仿hover效果的实现方法示例

    vue.js仿hover效果的实现方法示例

    这篇文章主要介绍了vue.js仿hover效果的实现方法,结合实例形式分析了vue.js事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • 在vue框架下使用指令vue add element安装element报错问题

    在vue框架下使用指令vue add element安装element报错问题

    这篇文章主要介绍了在vue框架下使用指令vue add element安装element报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue实现一个无限加载列表功能

    Vue实现一个无限加载列表功能

    这篇文章主要介绍了Vue实现一个无限加载列表功能,需要的朋友可以参考下
    2018-11-11
  • Element Card 卡片的具体使用

    Element Card 卡片的具体使用

    这篇文章主要介绍了Element Card 卡片的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue-cli构建vue项目的步骤详解

    vue-cli构建vue项目的步骤详解

    这篇文章主要介绍了vue-cli构建vue项目的步骤详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 前端本地存储方案localForage在vue3中使用方法

    前端本地存储方案localForage在vue3中使用方法

    localForage是前端本地存储的库,支持多种存储后端,并提供了一致的API来存储和检索数据,这篇文章主要给大家介绍了关于前端本地存储方案localForage在vue3中使用的相关资料,需要的朋友可以参考下
    2024-09-09

最新评论