vscode+vue3+高得地图开发过过程中本地视频及地图json文件的发布问题

很久没发blog了,最近vscode+vue3+高得地图开发中,因为有开发的视频教程,还有地图的边界的.json文件,这些静态文件发布时,如果处理不当,build命令会将这些静态文件进行打包。打包后文件名变化了,这样,你的代码在访问这些文件时,就找不到文件了。

处理办法:

1、关于静态文件如:.mp4 、.json文件的存放位置问题:

比如:前端运行后为:  http://xxx.xxx.xxx:9500/,那么该文件夹对应的路径为:src所在的目录。

比如:我的json文件是放在src/mapjson/的文件夹下的:

访问的时候:

2、如何让这些.mp4   .json静态文件在build时,不参与打包,即不修改文件名(打包后全部会封装到js文件中)。处理办法:

3、发布时,public文件夹下面的文件会原封不动的Copy到发布后的文件夹下面,所以,也需要将json文件COPY一份到:public文件夹下:

VSCode 中使用 Vue 进行开发的详细流程可以分为以下几个主要环节:环境搭建、项目创建、代码编辑与调试、以及项目运行和打包。 ### 环境准备 在开始之前,确保本地已安装以下工具: - **Node.js**:Vue 项目依赖 Node.js 来运行构建工具。 - **npm 或 yarn**:Node.js 安装后会自带 npm,也可以选择安装 yarn 作为包管理器。 - **VSCode**:轻量级且功能强大的代码编辑器,支持丰富的插件生态。 此外,推荐安装 Vue 开发相关的扩展,例如 “Vetur”,它可以提供语法高亮、智能补全、格式化等功能[^1]。 ### 使用 Vue CLI 创建项目 Vue CLI 是官方提供的脚手架工具,能够快速生成一个基于 Webpack 的 Vue 项目结构。 1. 在终端中全局安装 `@vue/cli`: ```bash npm install -g @vue/cli ``` 2. 初始化一个新的 Vue 项目: ```bash vue create my-vue-project ``` 其中 `my-vue-project` 是项目文件夹名称,可自定义。该命令将创建一个包含基础配置的项目结构,包括 Babel、Webpack 等配置[^2]。 3. 进入项目目录并启动开发服务器: ```bash cd my-vue-project npm run serve ``` 此时项目将在本地服务器上运行,默认地址为 `http://localhost:8080`。 ### 手动配置项目(可选) 如果不使用 Vue CLI,也可以手动设置 Webpack、Babel、Vue Loader 等工具来构建项目。这种方式适合对构建流程有更深入需求的开发者。基本步骤包括: - 配置 Webpack 构建流程 - 设置 Babel 转译 ES6+ 代码 - 引入 Vue 及其相关依赖 - 编写入口文件 `main.js` 和组件结构 ### 在 VSCode 中进行开发 打开项目文件夹后,可以利用 VSCode 的诸多特性提升开发效率: - **多光标编辑**:提高批量修改代码效率。 - **代码折叠与大纲视图**:便于快速浏览组件结构。 - **集成终端**:无需切换窗口即可执行命令。 - **调试功能**:通过 `.vscode/launch.json` 配置调试器,直接在编辑器中调试 Vue 应用。 - **插件支持**:如 Vetur 提供模板语法高亮、错误检查等增强体验[^1]。 ### 项目运行与打包 开发过程中可通过 `npm run serve` 实时预览应用。完成开发后,使用以下命令进行打包部署: ```bash npm run build ``` 该命令会将最终资源输出到 `dist/` 目录中,适用于部署到生产环境的服务器上。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xjzdr

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值