如何配置使子路径下的Vue自定义元素正确加载shop项目内组件

AI 小北

2026-10-6

问题核心原因

你遇到的报错本质是通过example.test/shop访问时，Vue项目的静态资源（包含组件注册所需的JS文件、自定义元素定义文件）请求路径没有自动带上/shop前缀，请求被发送到了主站根路径，找不到对应资源导致组件注册失败。

解决方案

1. 调整前端项目构建配置

根据你所用的构建工具修改资源路径配置，改完后重新构建项目即可让所有资源自动匹配子路径前缀：

如果你用Vue CLI（webpack体系），修改项目根目录vue.config.js：

module.exports = {
  // 仅子路径部署时用'/shop/'，需要同时兼容根域名、子路径多场景访问就用相对路径'./'
  publicPath: '/shop/'
}

如果你用Vite构建，修改项目根目录vite.config.js：

export default defineConfig({
  // 多场景兼容同样可以换成'./'
  base: '/shop/'
})

2. 补充Apache配置（解决history路由刷新404问题）

你现有的Alias配置已经可以正常访问入口，若Vue用了history模式路由，需要补充重写规则避免子路径刷新404，修改第三个VirtualHost配置如下，改完重启Apache生效：

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/frontendflex/public"
    ServerName frontendflex.test
    Alias "/shop" "C:/xampp/htdocs/shop/public"
    <Directory "C:/xampp/htdocs/shop/public">
        Require all granted
        # 新增以下重写规则
        RewriteEngine On
        RewriteBase /shop/
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /shop/index.html [L]
    </Directory>
</VirtualHost>