【vue部署】Apache部署vue项目

news2024/11/22 19:45:10

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 项目的所有步骤.

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

海山数据库(He3DB)从方法到实践,构建以场景为中心的体验管理体系

编者按&#xff1a;体验优化的过程中设计师经常会遇到几个阶段&#xff0c;发现问题、定义问题、优化问题、查看反馈&#xff0c;但在产品快速迭代的过程中&#xff0c;体验的问题经常被归类到“不紧急”需求中&#xff0c;并逐步转为长尾问题&#xff0c;这些不被重视的问题聚…

AI在线免费音乐生成工具:suno、udio、stableaudio

文生音乐 1、suno https://app.suno.ai/ 2、udio https://www.udio.com/ 3、stableaudio https://stableaudio.com/live https://www.stableaudio.com/?utm_campaignstableaudio_promo&utm_mediumcta_button&utm_sourcestability_ai 4、其他MusicGen https://…

2024 年 电工杯(A题)大学生数学建模挑战赛 | 园区微电网风光储协调| 数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 CS团队倾注了大量时间和心血&#xff0c;深入挖掘解决方案。通…

智慧校园的运作加速学校现代化

智慧校园的建造使师生的学校日子愈加便利&#xff0c;学校办公现代化&#xff0c;整个学校充满了生机与活力。其间智慧校园带来的不只是大环境的改变&#xff0c;也为教育教育带来了一种新的形式。我们知道智慧校园是依据信息化的互联网技能&#xff0c;这些技能运用于学校后让…

linux系统CPU持续飙高的排查方法

目录 前言&#xff1a; 1、查看系统cpu使用情况 2、找出占用cpu高的进程 3、进一步分析进程占用的原因&#xff01;&#xff01;&#xff01; 4、解决办法 前言&#xff1a; 如果一台服务器&#xff0c;它的cpu使用率一直处于一个高峰值&#xff0c;此时服务器可能导致无…

vue3中在elementplus多行表格中渲染多图数组中首图的显示问题,无法正常显示图片,作用域插槽写法问题

背景 在vue3中使用elementplus的el-table组件的时候&#xff0c;此时我在vue生命周期中挂载时获取了到服务器了数据&#xff0c;这个数据是一个多个对象的数组&#xff0c;各个对象又包括了图片数组&#xff0c;此时我想在表格上的每一行渲染图片的首图&#xff0c;也就是下标为…

设计系统采购与安装:乙级资质申请的技术准备

在设计系统采购与安装方面&#xff0c;为乙级资质申请所做的技术准备涉及多个方面。以下是一些关键的技术准备事项&#xff1a; 明确技术需求&#xff1a;首先&#xff0c;需要明确乙级资质申请所需的技术系统类型和规格。这可能包括但不限于设计软件、工程管理系统、项目管理系…

【webrtc】m98:Call的创建及Call对音频接收处理

call中多個流共享相同的辅助组件 这几个是与外部共用的 线程传输send控制module 线程任务队列工厂call的辅助组件中各种统计以及接收测的cc是自己创建的 call自己的多个辅助组件是外部传递来的 call 创建多个接收流 这里用一个set 来保存所有指针,并没有要map的意思:

手艺人百度百科怎么创建

创建手艺人百度百科的过程与创建其他类型人物百度百科类似&#xff0c;都需要遵循一定的步骤和注意事项。以下是伯乐网络传媒pouquan整理的手艺人百度百科创建指南&#xff1a; 创建前的准备工作 确定词条名称&#xff1a;手艺人百度百科的词条名称应直接使用手工艺人的姓名。…

智慧教室课堂-专注度及考试作弊系统、课堂动态点名,情绪识别、表情识别和人脸识别结合

课堂专注度分析&#xff1a; 课堂专注度表情识别 作弊检测&#xff1a; 关键点计算方法 转头(probe)低头(peep)传递物品(passing) 侧面的传递物品识别 逻辑回归关键点 使用&#xff1a; 运行setup.py安装必要内容 python setup.py build develop 运行demo_inference.py 将…

uniappx 获取设备唯一标识(OAID、AAID、AndroidID、IMEI等) Ba-IdCode-U

简介&#xff08;下载地址&#xff09; Ba-IdCode-U 是一款可以获取国内各大手机厂商 OAID&#xff08;开放匿名设备标识&#xff09;及海外手机平台 AAID&#xff08;安卓广告标识&#xff09;的uniapp插件。另外也支持获取 IMEI/MEID、AndroidID、WidevineID、PseudoID、GUI…

ComfyUI 本地部署指南:概念、部署过程、生成图片、共享 WebUI 模型

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里&#xff0c;订阅后可阅读专栏内所有文章。 大家好&#xff0c;我是水滴~~ 本文主要讲解 ComfyUI 的本地部署指南&#xff0c;内容主要包括&#xff1a;ComfyUI 的概念、ComfyUI 本地部署过程、使…

关于光照模型

关于光照模型 早期学习笔记&#xff0c;转载自早期Excel。 存在大量格式错误、可读性非常低&#xff0c;建议等待作者修复后阅读、或者作为查找性材料使用。 中文名英文名/缩写说明长什么样兰伯特光照模型Lambert Lighting1.兰伯特反射(Lambert)是最常见的一种漫反射&#x…

VUE3-form表单保存附件与基本信息

element-ui代码 <el-dialog :title"上传附件" v-model"dialogAdds.visible" width"500px" append-to-body> <el-form-item label"唯一标识"> <dict-tag v-if"form.groupId" :options"unique_identifica…

倍福CX7000PLC PWM/PTO输出功能块编程应用

如果大家是第一次用倍福的控制器和PLC,建议大家看看下面的文章链接: 从零开始倍福TwinCAT 3 PLC 的一个简单项目-CSDN博客https://rxxw-control.blog.csdn.net/article/details/139124427倍福TwinCAT3软件下载安装 倍福TwinCAT3 PLC编程软件下载安装-CSDN博客

设计模式——职责链(责任链)模式

目录 职责链模式 小俱求实习 结构图 实例 职责链模式优点 职责链模式缺点 使用场景 1.springmvc流程 ​2.mybatis的执行流程 3.spring的过滤器和拦截器 职责链模式 使多个对象都有机会处理请求&#xff0c;从而避免请求的发送者和接受者之间的耦合关系。将这个对象连成…

怎么清理C盘空间?5个清理方法要掌握好!

“我的电脑太满了&#xff0c;想清理一下电脑&#xff0c;但是根本不知道怎么操作&#xff0c;有什么方法可以快速清理c盘空间吗&#xff1f;希望大家给我出出主意&#xff01;” 随着电脑使用时间的增长&#xff0c;C盘&#xff08;通常是系统盘&#xff09;的空间会逐渐被占用…

Web开发——HTMLCSS

1、概述 Web开发分前端开发和后端开发&#xff0c;前端开发负责展示数据&#xff0c;后端开发负责处理数据。 HTML&CSS是浏览器数据展示相关的内容。 1&#xff09;网页的组成部分 文字、图片、音频、视频、超链接、表格等等 2&#xff09;网页背后的本质 程序员写的前端…

如何确定SolidWorks文件是哪个版本的软件创建

由于 SolidWorks 低版本无法打开高版本的文件&#xff0c;我们有时候从网络上下载一些模型时可能现当前的 SolidWorks 版本无法打开模型的问题&#xff0c;这时候具需要确定模型究竟是哪个版本的以便于我们安装相应的版本或高版本的 SolidWorks。 那么我们就需要方法确定如何查…

Autodl服务器中Faster-rcnn(jwyang)训练自己数据集(二)

前言 上一章中完成了faster-rcnn(jwyang版本)的复现&#xff0c;本节将在此基础进一步训练自己的数据集~ 项目地址&#xff1a;https://github.com/jwyang/faster-rcnn.pytorch/tree/pytorch-1.0 复现环境&#xff1a;autodl服务器python3.6cuda11.3Ubuntu20.04Pytorch1.10.0…