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服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • element-plus报错ResizeObserver loop limit exceeded解决办法

    element-plus报错ResizeObserver loop limit exceeded解决办法

    这篇文章主要给大家介绍了关于element-plus报错ResizeObserver loop limit exceeded的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • vue 项目中的this.$get,this.$post等$的用法案例详解

    vue 项目中的this.$get,this.$post等$的用法案例详解

    vue.js的插件应该暴露一个install方法。这个方法的第一个参数是vue构造器,第二个参数是一个可选的选项对象,首页要安装axios,本文结合案例代码给大家详细讲解vue 中的this.$get,this.$post等$的用法,一起学习下吧
    2022-12-12
  • 在浏览器console中如何调用vue内部方法

    在浏览器console中如何调用vue内部方法

    这篇文章主要介绍了在浏览器console中如何调用vue内部方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 前端自动化测试Vue中TDD和单元测试示例详解

    前端自动化测试Vue中TDD和单元测试示例详解

    这篇文章主要为大家介绍了前端自动化测试Vue中TDD和单元测试示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 如何使用vuex实现兄弟组件通信

    如何使用vuex实现兄弟组件通信

    这篇文章主要给大家介绍了关于如何使用vuex实现兄弟组件通信的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • 快速修改antd vue单个组件的默认样式

    快速修改antd vue单个组件的默认样式

    这篇文章主要介绍了快速修改antd vue单个组件的默认样式方式,具有很好的参考价值,希望对大家有所帮助。
    2022-08-08
  • mpvue 单文件页面配置详解

    mpvue 单文件页面配置详解

    这篇文章主要介绍了mpvue 单文件页面配置详解,本文将介绍如何在 mpvue 官方模板的基础上,通过配置 mpvue-config-loader 来实现在 vue 文件内书写小程序的页面配置,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • vue中过滤器的用法

    vue中过滤器的用法

    这篇文章介绍了vue中过滤器的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • 详解vuejs2.0 select 动态绑定下拉框支持多选

    详解vuejs2.0 select 动态绑定下拉框支持多选

    这篇文章主要介绍了vuejs2.0 select动态绑定下拉框 ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 解决elementUI中el-tree树形结构中节点过滤的问题

    解决elementUI中el-tree树形结构中节点过滤的问题

    这篇文章主要介绍了解决elementUI中el-tree树形结构中节点过滤的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04

最新评论