vite+vue3+plyr播放本地public文件夹下视频无法加载

Question

{
  "name": "ncn-sop-spa",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@layui/layer-vue": "^2.4.2",
    "element-plus": "^2.7.7",
    "i": "^0.3.7",
    "jquery": "^3.7.1",
    "plyr": "^3.7.8",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.3.1"
  }
}

使用vite5.3.1+vue3.4.29+plyr3.7.8学习做一个视频播放组件，组件代码：

<div ref="player" class="" width="100%">
    <video width="100%" height="240" playsinline controls>
      <source src="/store/123.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
  </div>

问题描述：
1.使用npx vite 预览时 plyr视频无法播放，查看视频地址为http://localhost:5173/store/123.MP4，打开浏览器调试页面报错为：
[Vue Router warn]: No match found for location with path "/store/123.MP4"

2.但是在同样目录下。打开一个图片时是正常的。

请专家帮忙看下是什么问题，为什么同样的public的store文件夹上，图片和视频文件会出现不一样的情况。另外，我对http://localhost:5173/store/123.MP4打不开视频的情况进行了测试，在store前面加上public路径时就可以打开http://localhost:5173/public/store/123.MP4。但是npm run build后打包文件中按照http://localhost:5173/public/store/123.MP4地址找不到视频，按照http://localhost:5173/store/123.MP4可以观看视频。

请教下这问题是什么原因，如何解决，不可能在开发的时候每个视频地址前面都要加上public，然后npm run build打包时又取消public把

Answer 1

引用gpt4

使用 Vite+Vue3+Plyr 播放本地视频问题分析与解决方案

问题描述

在使用 Vite+Vue3+Plyr 构建的视频播放组件中，无法加载位于 public/store 文件夹下的视频文件。在开发环境中，访问路径 /store/123.MP4 时视频无法播放，且控制台报错 [Vue Router warn]: No match found for location with path "/store/123.MP4"。但是，同目录下的图片文件可以正常加载。通过路径 /public/store/123.MP4` 可以访问视频，但打包后该路径无法正常工作。

问题分析

1. 开发与生产路径不同：在开发环境中，Vite 会将 public 目录下的文件作为根路径 / 进行访问。这意味着 /store/123.MP4 应该可以工作。但是从错误提示来看，Vue Router 可能正在拦截该路径。
2. 路由配置问题：Vue Router 可能会拦截 /store/123.MP4 的请求，因为该路径未匹配到任何定义的路由，因此报错。
3. 静态文件访问：图片能够正常加载，说明静态文件配置是有效的，但视频文件被路由系统处理时出现了问题。

解决方案

1. 更新路由配置：确保 Vue Router 不会拦截静态资源的请求，可以添加一个全局的捕获所有路由，或者修改现有路由以忽略特定路径。
2. 检查 Vite 配置：确保 Vite 正确配置以服务于 public 文件夹中的视频文件。

代码示例

1. 路由配置：修改路由设置，确保不会拦截视频文件的请求。

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';

const routes = [
  {
    path: '/',
    component: Home,
  },
  {
    path: '/store/:filename',
    // 这个路由确保路由系统不会拦截视频请求
    beforeEnter: (to, from, next) => {
      if (to.params.filename.endsWith('.mp4')) {
        window.location.href = `/store/${to.params.filename}`;
      } else {
        next();
      }
    },
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

1. HTML 模板：确保在开发和生产环境中都能正确构建路径。

<template>
  <div ref="player" class="" width="100%">
    <video width="100%" height="240" playsinline controls>
      <source src="/store/123.MP4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
  </div>
</template>

1. Vite 配置：确保 Vite 正确处理静态资源。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  server: {
    fs: {
      strict: true,
    },
  },
});

总结

问题主要出在路由配置上，Vue Router 拦截了静态文件路径。通过调整路由配置，确保视频文件的路径不会被拦截，可以解决视频文件在开发环境中无法加载的问题。这种方法应该可以让你在开发和生产环境中都正确加载视频文件。