Vue3.0静态文件存放路径与引用

最新推荐文章于 2024-07-23 19:57:56 发布
最新推荐文章于 2024-07-23 19:57:56 发布
阅读量1.3w 收藏 4
点赞数 2
分类专栏： vue 文章标签： 1024程序员节 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianxiu11/article/details/120929446
版权

一般项目的静态文件都放到static文件夹中，在3.0版本中static文件夹不能与src文件同级，一般都需要放在public文件目录下，引用路径也不太相同
在这里插入图片描述

例如
2.0直接放到static文件中那么路径为 /static/img/headbg05.jpg（注意这个是放在src同级目录下）
3.0就需要放到public文件中
我们将static文件拉入public下，访问路径依旧是 /static/img/headbg05.jpg
注意：（cli2有写静态资源文件夹名字static，cli3.x不写静态资源文件夹名字！！！(名字为public)）

tianxiu11
关注
专栏目录
vue3+electron开发桌面应用，静态资源处理方式及路径问题总结
autumngold的专栏
02-27 2252
的引用解析为相应模块的路径，并且，如果项目配置了相应的loader，Webpack 还会处理文件内容，可能会转换这些静态资源为 base64 URI，或者将其复制到输出目录，并修改为最终路径。当你的网站或应用需要在多个子路径或不同的环境中部署，而没有固定的根路径时，设置。目录下的静态资源时，例如图片或样式文件，Webpack 会使用相应的加载器(loader)来处理它们。这里的静态路径是指直接写死的字符串，动态路径是指vue中的响应式数据生成的路径。静态路径没什么好说的，写相对路径，vue会自动处理好。
vue 项目引用static目录资源_vue中 静态文件引用注意事项
weixin_39848953的博客
12-21 9988
(一)assets文件夹与static文件夹的区别区别一：assets文件是src下的，所以最后运行时需要进行打包，而static文件不需要打包就直接放在最终的文件中了区别二：assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用，在script下必须用@import的方式引入，而static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式...
vue3怎么获取静态资源
atu1111的博客
05-25 2421
vue3怎么获取public静态资源   vue@cli3没有static，静态资源都放在public目录下 1.定义变量获取静态资源路径process.env.BASE_URL data() { return { publicPath: process.env.BASE_URL }; }, 2.通过${}引入 <img :src="`${publicPath}/favicon.ico`" alt=""> ...
vue3中的:src绑定的路径问题
rzh554的博客
07-23 284
在遇到该问题我就将路径改为：@/static/seatnull.png，还是错了，还是找不到图片资源。总结：:src中使用的静态资源应该使用'/'开头。
vue-cli3静态资源static assets项目结构
weixin_34345560的博客
04-18 5339
今天又是纠结的一天...本文又名:vue/cli3中不得不知的webpack配置..如大家所见，我在前文也写过 vue-cli3.0默认项目目录与2.0的相比，更精简:1.移除的配置文件根目录下的，build和config等目录，2.移除了static文件夹，新增了public文件夹，并且index.html移动到public中。3.在s...
vue3 HTML 和静态资源
热门推荐
徐本锡的专栏
04-24 3万+
文件是一个会被处理的模板。在构建过程中，资源链接会被自动注入。另外，Vue CLI 也会自动注入 resource hint (、manifest 和图标链接 (当用到 PWA 插件时)) 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。放置在public目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。从相对路径导入。
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
在使用 Vue CLI 3.0 进行项目打包时，可能会遇到静态资源（如图片、CSS、JavaScript 文件等）找不到路径的问题。这个问题通常出现在部署到服务器后，因为本地开发环境与线上环境的资源路径不同。以下是如何解决这个...
vue引入静态js文件的方法
10-15
总结起来，Vue项目中引入静态JS文件的关键在于理解文件的存放位置（Vue CLI 2.0的`static`目录，Vue CLI 3.0及更高版本的`public`目录）以及正确地在HTML模板中引入。同时，确保在`config.js`中使用兼容性良好的ES5...
vue@cli3项目模板怎么使用public目录下的静态文件
10-15
总结来说，使用Vue CLI 3的`public`目录存放静态文件，需要通过`process.env.BASE_URL`来构建动态路径，确保文件在开发和生产环境中都能正确引用。理解这一机制对于优化Vue CLI 3项目中的静态资源管理至关重要。希望...
Vue3.0实现todolist
ll666888999的博客
03-31 1575
项目准备 Vue3.0环境搭建 1、官网安装node，进入node.js官网安装长期支持版 打开终端输入：node -v 如果出现node版本号，表明安装成功 安装node自带npm,包管理工具 输入npm -v 出现npm的版本号 2、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 输入cnpm -v 会出现一系列版本号，说明安装成功 3、安装vue环境：cnpm i -g vue @vue/cli 输入vue -
Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架！
qq_33546296的博客
06-03 973
/ 此处的id很重要name: ''}),getters: {},},actions: {},// 登录// 调用接口，做逻辑处理})setup() {// $patch 修改 store 中的数据name: '名称被修改了,nameLength也改变了'})return {userStore,updateName},})
Vue3的js代码：可放入static静态目录的js文件下使用前端vue框架
最新发布
08-05
Vue3的js代码：可放入static静态目录的js文件下使用前端vue框架
vue打包静态资源后显示空白及static文件路径报错的解决
10-14
主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 设置静态资源图片
家里有只小肥猫
05-16 500
【代码】vue3 设置静态资源图片。
Vue：静态资源的路径问题
彭世瑜的博客
05-24 2242
1、template <img src="@/assets/image/login/title.png" alt=""> // 渲染后html页面 <img src="/static/img/title.1e9fa570.png" alt=""> 2、style /* 图片路径 src/assets/image/bg-index.jpg */ background: url(~@/assets/image/bg-index.jpg) /* 渲染后 */ background:
vue3+vite打包配置，绝对路径改相对路径，更改静态资源目录
vayne_1的博客
05-26 2万+
vue3+vite打包配置，绝对路径改相对路径，更改静态资源目录
Vue 3 引入了静态标记（Static Marking）来优化虚拟 DOM 的渲染过程
weixin_39273589的博客
08-09 519
静态标记的目的是将静态节点（不会改变的节点）与动态节点（可能会改变的节点）进行区分，减少不必要的虚拟 DOM 对比和渲染操作，提高渲染性能。对于被标记为静态的节点，在后续的渲染过程中，会被视为不需要重新渲染的节点，从而避免不必要的计算和 DOM 操作。在运行时，Vue 3 的虚拟 DOM 渲染器会根据静态标记的信息来确定需要更新的节点，从而优化渲染的过程。总结起来，静态标记是 Vue 3 中的一个编译器优化机制，通过识别静态节点和动态节点，并在渲染时跳过静态节点的更新，来提高渲染性能。
vue 项目引用static目录资源_Vue项目部署资源路径问题
weixin_39540271的博客
12-21 1554
本文主要解决两个问题：1、vue-cli发布时 js，css文件路径错误2、vue-cli发布时js、css文件正常，但是图片路径错误问题:vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后，即可开始项目部署项目部署根据公司要求不同大致分为一下俩种部署方式：1、服务器放置打包后生成的dist文件夹此种部署方式，需要将config.js文件下index.js中...
在Vue 3中加载本地图片和其他静态资源
码农键盘上的梦
02-23 8755
以上是几种加载本地图片和其他静态资源的方法，根据你的具体需求和项目配置选择适合的方法即可。首先，确保你已经安装了file-loader或url-loader插件。首先，确保你已经安装了file-loader或url-loader插件。如果图片和组件位于同一目录下，可以在模板中直接使用相对路径来引用本地图片和其他静态资源。如果你使用了Webpack等构建工具，也可以使用ES6的。例如，如果图片位于与组件相同的目录下，可以使用。函数将图片作为模块导入，然后在组件中使用它。目录下，然后使用绝对路径来引用它们。
vue3.0 静态html
05-04
Vue 3.0 的静态 HTML 生成器是通过编译器实现的。在 Vue 3.0 中，编译器产生的代码可以直接输出为静态 HTML，而无需在运行时动态生成 HTML。 在 Vue 3.0 中，可以通过以下方式将模板编译为静态 HTML： 1. 使用 `@...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值