【vue部署】Apache部署vue项目

Apache部署vue项目

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

Apache 下载安装(windows)

1. 下载

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

相关推荐
lichong9513 分钟前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之video 的各种状态和生命周期调用说明
android·vue.js·macos
excel13 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手14 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360216 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep16 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo18 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
IT_陈寒38 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用40 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥1 小时前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc