【vue部署】Apache部署vue项目

Apache部署vue项目

  • Apache 下载安装(windows)
      • 1. 下载
      • 2. 安装
      • 3. 启动服务
  • vue 部署配置
      • 1. 基础配置
      • 2. 解决页面刷新问题

Apache 下载安装(windows)

1. 下载

  • Apache 2.4.59
    下载地址:httpd-2.4.59-240404-win64-VS17.zip

  • Visual C++ Redistributable for Visual Studio 2015-2022 x64
    下载地址:VC_redist.x64.exe

2. 安装

修改配置文件 D:/Apache24/conf/httpd.conf

  • 修改服务器根目录为自己的Apache安装目录,如: Define SRVROOT "D:\Apache24"
  • (非必须)为避免端口冲突,可以将默认的80端口修改为其他端口。如: Listen 8080

3. 启动服务

  1. 管理员身份打开命令提示符,在D:/Apache24/bin/文件夹下执行httpd -k install -n <服务器名> (服务器名自定义)
    示例图片

  2. Win+R打开运行程序, 输入services.msc,查看服务,就会找到上一步执行的<服务器名>,选中服务,即可启动服务
    示例图片

  3. 在浏览器输入http://localhost:8080即可访问页面,看到“It works!”.
    8080为安装时配置的 Listen 端口

vue 部署配置

1. 基础配置

  • vue打包好的dist复制到D:/Apache24,并修改dist文件名为vuep
    更新vue dist包时,不需要重新启动Apache服务
  • 修改配置文件 D:/Apache24/conf/httpd.conf
    • 增加以下配置

      Listen 8090
      <VirtualHost *:8090>
          DocumentRoot "${SRVROOT}/vuep"
      	ErrorLog "logs/local.com-error.log"
          CustomLog "logs/local.com-access.log" common
      
          <Directory "${SRVROOT}/vuep">
      		Options Indexes FollowSymLinks
              AllowOverride All
      		Require all granted
      		DirectoryIndex index.html
          </Directory>
      </VirtualHost>
      
      
    此时启动apache服务,第一次可以正常访问, 但刷新页面后,显示Not Found.The requested URL was not found on this server.
    • vue router 配置
      router配置了base属性时,打包时配置为base: '/vuep'

2. 解决页面刷新问题

  1. 启用mod_rewrite模块,删除#

    LoadModule rewrite_module modules/mod_rewrite.so

  2. 添加配置

    	# 使路由重定向到index.html
    	<IfModule mod_rewrite.c>
    		RewriteEngine On
    		RewriteBase /
    		RewriteRule ^index\.html$ - [L]
    		RewriteCond %{REQUEST_FILENAME} !-f
    		RewriteCond %{REQUEST_FILENAME} !-d
    		RewriteRule . /index.html [L]
    	</IfModule>
    

    方案1. 将配置添加到<Directory>

    方案2. 在vuep下新建.htaccess文件,并将配置写入

tip: 当Apache服务启动失败时,可以先查看端口是否被占.

以上就是Apache部署vue 项目的所有步骤.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/636525.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python解析网页-XPath

目录 1、什么是XPath 2、安装配置 3、XPath常用规则 4、快速入门 5、浏览器XPath工具 1.什么是XPath XPath&#xff08;XML Path Language&#xff09;是一种用于在XML文档中定位和选择节点的语言。 它是W3C&#xff08;World Wide Web Consortium&#xff09;定义的一种标…

Springboot+Element_分页+显示+搜索+完整版

目录 显示效果 新建项目时选择的依赖 文件的目录结构 一、准备工作 1、配置文件 2、pom增加PageHelper 3、在idea中建立数据库连接&#xff0c; 4、新建peom表&#xff08;如已建好&#xff0c;则忽略本条&#xff09; 二、新建前端页面index.html&#xff08;未连后端…

Redis --学习笔记

Redis简介 一个基于内存的key-value结构数据库。Redis 是互联网技术领域使用最为广泛的存储中间件 特点&#xff1a; 基于内存存储&#xff0c;读写性能高 适合存储热点数据&#xff08;热点商品、资讯、新闻&#xff09; 企业应用广泛 Redis默认端口号为6379 Redis是用…

Web安全:企业如何抵御常见的网络攻击?

近年来随着人类社会向数字世界的加速发展&#xff0c;勒索软件攻击事件在全球范围内呈现快速上升的态势&#xff0c;几乎所有国家的政府、金融、教育、医疗、制造、交通、能源等行业均受到影响&#xff0c;可以说有互联网的地方就可能发生勒索软件攻击事件。 Web安全是一个大课…

【调试笔记-20240520-Linux-在 WSL2 / Ubuntu 20.04 中编译 QEMU 可运行的 OVMF 固件】

调试笔记-系列文章目录 调试笔记-20240520-Linux-在 WSL2 / Ubuntu 20.04 中编译 QEMU 可运行的 OVMF 固件 文章目录 调试笔记-系列文章目录调试笔记-20240520-Linux-在 WSL2 / Ubuntu 20.04 中编译 QEMU 可运行的 OVMF 固件 前言一、调试环境操作系统&#xff1a;Windows 10 …

科技赋能,拓宽生活边界

在当今多元化与快速变化的社会中&#xff0c;社会适应能力成为了衡量个人能否顺利融入社会、享受生活品质的关键指标。对于盲人朋友而言&#xff0c;这一能力尤为重要&#xff0c;它不仅关乎日常生活的便利&#xff0c;更影响到心理的健康与社会参与度。在此背景下&#xff0c;…

ERP与MES系统中的产品装配结构与序列号管理

在企业资源计划&#xff08;ERP&#xff09;系统中&#xff0c;产品不仅仅是物料的简单集合&#xff0c;它们还扮演着转配件的角色。通过物料清单&#xff08;BOM&#xff09;的形式&#xff0c;ERP系统能够详细表达出产品的装配结构。例如&#xff0c;在个人电脑&#xff08;P…

颠覆传统编码,零基础也能飞的工具!

YDUIbuilder以其低代码的设计理念&#xff0c;通过简单的拖拽操作&#xff0c;即使是编程新手也能快速构建出专业的用户界面。这不再是一个遥不可及的梦想&#xff0c;而是一个触手可及的现实。 组件化世界&#xff0c;创意无限&#xff1a;构建梦想中的界面 在YDUIbuilder的组…

电脑刚删除的东西怎么恢复?学会这5招,轻松恢复!

“我刚刚一不小心把电脑里的一个重要文件删除了&#xff0c;现在不知道应该怎么操作才能恢复这个文件&#xff0c;有没有可以分享一下恢复方法的朋友呀&#xff1f;非常感谢&#xff01;” 在日常使用电脑的过程中&#xff0c;误删文件或文件夹的情况时有发生。这些被删除的文件…

大厂程序员离职,开发一个盲盒小程序2万,一周开发完!

大家好&#xff0c;我是程序员小孟&#xff01; 前面接了一个盲盒的小程序&#xff0c;主要的还是商城&#xff0c;盲盒的话只是其中的有一个活动。 现在的年轻人是真的会玩&#xff0c;越来越新的东西出来&#xff0c;越来越好玩的东西流行。 就像最近很火的地摊盲盒。 讲…

快速开发 Chrome插件

什么是 Chrome 插件 Chrome 插件程序是一种用于增强 Google Chrome 浏览器功能的小型软件应用程序。它们可以帮助用户自定义浏览体验、添加新功能、集成外部服务以及自动化任务等。扩展程序使用 HTML、CSS 和 JavaScript 编写&#xff0c;利用 Chrome 提供的 API 来与浏览器及…

昔日辉煌不再,PHP老矣,尚能饭否?

导语 | 近期 TIOBE 最新指数显示&#xff0c;PHP 的流行度降至了历史最低&#xff0c;排在第 17 名&#xff0c;同时&#xff0c;在年度 Stack Overflow 开发者调查报告中&#xff0c;PHP 在开发者中的受欢迎程度已经从之前的约 30% 萎缩至现在的 18%。“PHP 是世界上最好的语言…

JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据

JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据 前言 我们在上一篇页面访问&页面关闭数据上报的文章中使用了 sendBeacon 方法用来发送数据&#xff0c;上篇文章是简单使用&#xff0c;那本篇文章我们就详细了解下这个东西。 一、Navigator.sendBeacon 是什么…

算法2:滑动窗口(上)

文章目录 长度最小子数组无重复字符的最长子串[最大连续 1 的个数III](https://leetcode.cn/problems/max-consecutive-ones-iii/description/)将x减到0的最小操作数 长度最小子数组 class Solution { public:int minSubArrayLen(int target, vector<int>& nums) {in…

SAP---成本中心采购跟消耗性采购的区别

1.常规库存采购业务的说明&#xff1a; 1.从业务层面分析&#xff0c;企业的常规库存物料采购是&#xff1a; 采购部门下采购订单后&#xff0c;供应商送货&#xff0c;当货物到厂后&#xff0c;由库管员执行收货操作&#xff0c;先将货物收到仓库中&#xff0c;再由各个需求…

APP广告变现,开启你的APP盈利新纪元

随着科技的飞速发展&#xff0c;智能手机已经成为了我们生活中不可或缺的一部分。而在这个数字化时代&#xff0c;APP应用更是如雨后春笋般层出不穷&#xff0c;为我们的生活带来了极大的便利。然而&#xff0c;对于APP开发者来说&#xff0c;如何在激烈的市场竞争中脱颖而出&a…

智能的PHP开发工具PhpStorm v2024.1全新发布——支持PHPUnit 11.0

PhpStorm是一个轻量级且便捷的PHP IDE&#xff0c;其旨在提高用户效率&#xff0c;可深刻理解用户的编码&#xff0c;提供智能代码补全&#xff0c;快速导航以及即时错误检查。可随时帮助用户对其编码进行调整&#xff0c;运行单元测试或者提供可视化debug功能。 立即获取PhpS…

Docker Portainer使用

Portainer是什么 Docker Portainer是一个轻量级的 Web UI 管理界面,可以用来管理Docker环境。它提供了一个直观的控制台,用户可以通过它来管理Docker主机、容器、网络、卷等Docker资源。 Portainer的主要功能和特点包括: 容器管理:可以查看、启动、停止、删除容器,以及查看容器…

SpringBoot中使用AOP实现日志记录功能

目录 一、SpringBoot框架介绍 二、什么是 AOP 三、日志记录的必要性 四、SpringBoot中如何使用AOP实现日志记录功能 一、SpringBoot框架介绍 SpringBoot是一个开源的Java开发框架&#xff0c;旨在简化基于Spring框架的应用程序的开发。它提供了一套开箱即用的工具&#xf…

WebGL的医学培训软件开发

开发基于WebGL的医学培训软件是一项复杂且技术性强的任务&#xff0c;需要结合医学专业知识和计算机图形学技术。以下是详细的开发流程和关键步骤。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.需求分析与定义 目标用户&#xf…