static文件夹变动（运行vue项目后通过浏览器地址栏浏览项目本地文件）

最新推荐文章于 2025-01-14 10:43:35 发布
原创 最新推荐文章于 2025-01-14 10:43:35 发布 · 694 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #vue.js

本文介绍从Vue2升级到Vue3后，静态资源文件存放的变化。详细解释了如何使用public文件夹替代原先的static文件夹，并说明了如何通过浏览器直接访问这些文件。

问题

脚手架2到脚手架3后static文件夹发生变化，脚手架3 怎么存放本地文件
如何通过浏览器地址栏访问项目目录中的文件

static文件

将json文件放在static文件夹中，运行项目后，可以通过发送网络请求的形式获取到static中的json文件或其他本地文件，vue2脚手架目录中已经创建了static文件夹，但是vue3脚手架中删除了该文件，
在这里插入图片描述

取而代之的是public文件，所以请求方式也发生了变化，本地文件的存放方式也发生变化，具体如下：
在这里插入图片描述
在这里插入图片描述

并且在路径当中不需要加上public，否则请求不到（亲测）

在这里插入图片描述

在浏览器地址栏输入对应的文件路径就可以访问

在这里插入图片描述

Flask Statics 静态文件
Mr数据杨
10-01 385
Flask框架提供灵活的配置选项以适应不同的项目需求和开发环境。通过和这两个参数，开发者可以轻松地调整静态资源的存储位置和访问路径。这种配置的灵活性尤其在需要将Flask与其他前端框架集成，或者在项目架构需要明确区分资源存放位置时显得尤为重要。正确地使用这些配置选项，可以帮助开发者构建更加清晰和高效的Web应用结构，同时避免路径冲突，确保资源的有效管理和优化用户访问速度。参数名称类型默认值描述str‘static’指定静态文件的文件夹名，用于存放CSS、JS和图片等静态资源。str。
VUE面试题（3）--vue常见面试题
MingL520的博客
05-21 828
除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。[info]举个聚焦输入框的例子，如下：autofocus在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。// 注册一个全局自定义指令 `v-focus`// 当被绑定的元素插入到 DOM 中时……// 聚焦元素el.focus()})如果想注册局部指令，组件中也接受一个directivesfocus: {// 指令的定义。
vue项目可以通过本机localhost和本机或其他电脑使用ip地址访问的方法
千里之行，始于足下！
01-08 5812
问题描述： 本机的vue项目通过npm run dev 或者npm run serve的方式启动后，在浏览器可以通过输入localhost：8080就可以访问 但当在本机或者其他电脑的浏览器中输入本机的ip地址+端口，即：192.168.212.82:8080,不能访问成功 解决方法： 1、解决方法一： 找到项目的配置文件：/config/index.js，修改index.js文件中的host值，...
vue项目，别人电脑上看你本地的项目
Achong999的博客
02-24 2813
别人打开这个就可以访问你本地项目了（类似于：192.168.100.100:8089 ）（PS：连同一个WiFi，必须在同一个局域网才行）npm run dev --host 报错。4. 电脑IP+端口即可访问了。
vue如何打开本地的html文件,Vue本地执行build之后打开dist目录下index.html正常访问...
weixin_32023449的博客
06-29 3974
场景Vue的项目执行npm run build后会在本地dist下生成打包后的文件但是此文件给后端后就能访问，如果直接在本地双击在浏览器中打开就会提示一堆文件路径找不到。这是因为直接在本地访问打开的话，请求资源的url是如上图file://那种开头的路径，需要的是类似于localhost:8080/这样的在服务器中的访问路径。经过参考别人的博客，有将vue.config.js中的publicPat...
基于Vue的前端架构，我做了这15点
这个时代，作为程序员可能要学习小程序
12-08 577
点击上方的终端研发部，右上角选择“设为星标”作者：codexu链接：https://juejin.cn/post/69014669944789401681.分解需求技术栈考虑到后续招人和...
读懂springMVC的配置文件（1）
qq_36723093的博客
12-08 160
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 前言 本文主要是写给初识springmvc或者spring-web项目的新人，简单分析了springmvc的部分项目流程，内容如果有不对希望大家指出，以免造成误导。 一、为什么要写 现在新人都被教导直接通过idea来快速生成spring和springmvc项目，这是非常简便快捷的，在日后工作中也是无可指责，但是对于初学者来说，这样过于简便的途径往往会使得他们不会去了解spring与springMVC的配置流程，也对idea产生了依赖， 二、s
【新手福音】：从零开始打造Django + Vue.js项目
[【新手福音】：从零开始打造Django + Vue.js项目](https://www.djangotricks.com/media/tricks/2022/6d6CYpK2m5BU/trick.png?t=1698237833) # 摘要 本文旨在介绍Web开发中两个重要的框架：Django与Vue.js。首先，...
Vue 的前端架构
qt的博客
02-06 786
本文几乎就是一篇软件设计文档。Vue 中后台项目可能遇到的问题几乎都覆盖了，并且提供了详尽合理的解决方法 1.分解需求 技术栈 考虑到后续招人和现有人员的技术栈，选择 Vue 作为框架。 公司主要业务是 GIS 和 BIM，通常开发一些中大型的系统，所以 vue-router 和 vuex 都是必不可少的。 放弃了 Element UI 选择了 Ant Design Vue（最近 Element 好像复活了，麻蛋）。 工具库选择 lodash。 建立脚手架 搭建 NPM 私服。 使用 Node 环境开
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 8622
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
Vue3的js代码：可放入static静态目录的js文件下使用前端vue框架
08-05
Vue3的js代码：可放入static静态目录的js文件下使用前端vue框架
spring-boot之浏览器访问静态文件
u011269801的专栏
07-18 1115
 
Vue 项目位置的方法
最新发布
m0_72056325的博客
01-14 1020
通过以上方法，应该能够帮助你找到 Vue 项目的位置，然后就可以按照之前提到的步骤进行操作了。
vue 项目引用static目录资源_vue 项目打包后访问静态资源路径问题
weixin_39790877的博客
12-21 2003
1.如项目发布到子域名 www.appprow.com/abc此时css资源路径应该为.content{background:url('abc/static/img/1.jpg')}需要修改config > index.js如图webpack publicPath 参数是用来，帮助你为项目中的所有资源指定一个基础路径，一但设定值以后，所有代码中通过requrie 或import 方式引...
Vue-Cli 访问静态文件
♀我爱摇滚，更爱金属乐♀
12-18 1524
版本： D:>vue -V @vue/cli 4.5.7 目录结构 image.png 问题： 无论如何设置，都无法访问/static的图片，百思不得其解！ -解决： 找了半天，发现根目录居然有一个/static的文件夹，事实上，vue的静态文件是放在/public/static里的，这个长在根目录下的/static是怎么来的？？？原因未知。这下就好办了，把图片挪到/pub...
疑难杂症——如何利用vscode运行vue前端项目
xdk2166的博客
08-12 1万+
如何利用vscode运行vue前端项目vscode运行vue前端项目vscode[下载](https://code.visualstudio.com/)vscode切换中文导入vue项目安装[node.js](https://nodejs.org/en/download/)运行vue项目 vscode运行vue前端项目 vscode下载 vscode切换中文 1.使用快捷键组合【Ctrl+Shift+p】，打开搜索框，输入“configure display language” 2.没切换中文之前，是没
vue打包之后，放到服务器上访问不到static文件夹下面的html文件，该如何解决
weixin_39418338的博客
07-02 6046
​以前都是和团队合伙开发前端，从不接触设置打包配置项。现在公司前端一个人，要自己学会配置。最近写公司官网，vue文件打包之后，在项目里面通过window.open()访问放在static下的html文件，放在公司服务器访问不到static下面的文件，问题出现在打包配置项上。 vue组件里面使用：window.open("/static/pro/protocol_privacy.html"); // 错误的写法 因为我打包配置不是在根目录下（/），而是放在/home/目录下，所以访问静态页面时...
Vue静态资源目录及常用指令
XIAO_YuBaby的博客
11-07 998
开始写代码前，先将vue中App.vue页面原有的内容清空，清空后如下 静态资源目录 在项目上可以配置public 或者static为静态资源目录 1.静态资源目录的访问 可以在网页代码中访问静态资源目录 <div id="app"> <img src="public/logo.png" alt=""> </div> 或者网页网址栏直接访问 2...
vue项目配置public静态资源路径访问
热门推荐
蛐蛐的博客
10-24 1万+
1.简介 一般的vue项目都有一个初始index.html，而其他js、css都是这个html引入的，默认情况下使用绝对路径引入，如/js/app.js 这样就有一个问题，静态资源经常要部署在不同的上下文路径下，如nginx将vue静态资源部署在/static下 此时使用绝对路径访问不到index.html引入的js、css等，而相对路径是不变的 2.解决 vue.config.js module.exports = { publicPath: '' } ...
Springboot+Vue影视评论系统前后端分离完整项目
项目资源包含了后端的springboot文件夹和前端的vue文件夹，这样的组织结构便于开发者理解和维护代码。" 详细知识点: 1. Spring Boot - Spring Boot是一个为了解决企业级应用开发中配置繁琐、依赖繁多的问题而诞生...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

LBY_XK

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

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

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

打赏作者

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

抵扣说明：

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

余额充值