vue中video访问电脑本地视频路径

在Vue项目中，如果你希望使用`<video>`标签访问电脑本地的视频文件，需要注意浏览器的同源策略（Same-origin policy），它会限制网页之间的相互操作，特别是对本地文件的读取会有安全限制。

不过，你可以通过创建一个本地的服务器来绕过这个限制。使用Node.js配合一些开发工具（如webpack-dev-server、http-server等）可以快速搭建本地服务器。下面是一些基本步骤：

1. 安装Node.js和npm（Node.js的包管理器）。
2. 在项目文件夹内创建一个`package.json`文件（如果还没有的话），并安装所需依赖，例如webpack-dev-server：

   npm init -y
   npm install webpack-dev-server --save-dev

3. 在`package.json`中添加脚本来启动服务器，例如：

   "scripts": {
       "start": "webpack-dev-server --open"
   }

4. 修改webpack配置文件（如`webpack.config.js`），添加devServer配置：

   module.exports = {
       // ...
       devServer: {
           contentBase: './dist', // 指定本地服务器的静态文件根目录
           host: 'localhost',
           port: 8080,
           // 其他配置...
       }
   };

5. 启动服务器：

   npm run start

6. 现在你的Vue项目应该在`http://localhost:8080`上运行。你可以通过这个地址来访问你的视频文件，例如：

   <video controls>
       <source src="/path/to/your/local/video.mp4" type="video/mp4">
       Your browser does not support the video tag.
   </video>

请注意，直接通过文件系统路径（如`file:///C:/path/to/your/local/video.mp4`）通常无法在浏览器中直接访问，必须通过服务器来提供服务。