Vue项目Apache部署：URL需含文件夹名，需配置vue-router还是服务器？

兄弟，你这个情况需要同时配置Vue Router和Apache服务器才能彻底搞定——既要让前端路由适配新的URL路径，也要让Apache能正确处理刷新时的请求，我给你一步步拆解：

一、先给Vue Router配置基础路径 #

因为你要让应用的URL前缀是/foldername/app/，首先得让Vue Router和打包工具明确这个基础路径，不然打包出来的资源路径、路由链接都会出错。

1. 配置Vue Router的base参数 #

假设你的路由文件是src/router/index.js，如果用的是Vue 3的createWebHistory模式（这也是你刷新出问题的核心原因，hash模式不会有这类问题），修改成这样：

import { createRouter, createWebHistory } from 'vue-router'
import YourRoutes from './routes' // 你的路由列表

const router = createRouter({
  // 这里指定基础路径，结尾的斜杠别遗漏
  history: createWebHistory('/foldername/app/'),
  routes: YourRoutes
})

export default router

2. 配置项目的publicPath（Vue CLI项目） #

打开项目根目录的vue.config.js（没有的话直接新建一个），添加publicPath配置，确保打包后的资源都基于这个路径加载：

module.exports = {
  publicPath: '/foldername/app/'
}

改完之后重新执行npm run build生成新的dist文件夹，把这个新dist里的文件部署到Apache服务器的/foldername/app/目录下（比如Apache默认根目录是/var/www/html，那你就把文件放到/var/www/html/foldername/app/里）。

二、给Apache配置重写规则解决刷新404 #

这一步是关键！Vue的history模式下，刷新页面时浏览器会直接向Apache请求/foldername/app/xxx这个路径，但Apache会误以为这是真实的文件/目录，找不到就返回404。我们需要让Apache把所有不存在的文件/目录请求都转发到index.html，交给Vue Router来处理。

方法1：修改Apache主配置或虚拟主机配置 #

找到你的Apache配置文件（比如httpd.conf或者/etc/apache2/sites-available/your-site.conf），添加以下配置：

# 替换成你实际部署dist文件的目录路径
<Directory "/var/www/html/foldername/app">
  Options -Indexes +FollowSymLinks
  AllowOverride All
  Require all granted

  RewriteEngine On
  # 如果请求的不是真实文件/目录，就转发到index.html
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ /foldername/app/index.html [L]
</Directory>

配置完后重启Apache服务（比如执行sudo systemctl restart apache2）。

方法2：用.htaccess文件（更灵活，适合不能改主配置的场景） #

如果你的Apache允许使用.htaccess（要确保AllowOverride All已经开启），直接在你部署的/foldername/app/目录下新建一个.htaccess文件，内容如下：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /foldername/app/
  # 直接访问index.html就跳过规则
  RewriteRule ^index\.html$ - [L]
  # 非真实文件/目录就转发到index.html
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /foldername/app/index.html [L]
</IfModule>

为什么要同时配置？ #

• Vue Router的配置是让前端明确“自己在哪个路径下运行”，生成的链接、加载的资源都不会跑偏；
• Apache的重写规则是解决刷新时的404问题——毕竟刷新是直接请求服务器，得让服务器把请求交给Vue的前端路由来处理。

这样配置完之后，你就能通过ip-address/foldername/app访问应用，刷新也不会出问题了。

内容的提问来源于stack exchange，提问作者dcdcc