vue 项目引用static目录资源_使用webpack打包，如何实现在打包后所有静态资源路径都使用相对路径（并非/开头的全路径）？...

最新推荐文章于 2024-05-28 19:58:09 发布

weixin_39528029

最新推荐文章于 2024-05-28 19:58:09 发布

阅读量1k

点赞数

文章标签： vue 项目引用static目录资源

本文链接：https://blog.csdn.net/weixin_39528029/article/details/111762195

版权

我的项目是采用vue-cli脚手架搭建的开发环境，是一个多页(多入口)程序，目前是根据src中各入口js的路径来动态生成页面路径，因此发布后的多个页面的层级并不一致，比如登录页在根目录下，部分页面在第二层级，还有些页面在第三、四层级等(动态生成)。

在webpack的output的publicPath配置的是'/'，打包后的文件和资源引用路径如下：

打包后的所有页面的js、css引用和css中的图片引用，都是采用/开头的全路径(/是站点根目录路径)。

这样的引用路径，用于网站部署没什么问题，但是这个项目同时用于App集成，要和App打包在一起，因此所有静态资源的引用路径必须是相对路径(App里没有站点概念，/不会被识别为根目录)。它需要这样的打包效果：

也在网上搜索过，发现有相似的帖子：点击这里查看，它提供的思路是：修改publicPath来解决。

但没有解决我的问题，我项目里的多个页面路径层级不一，对静态资源的引用路径前缀肯定也是不一致的。

请问，该如何配置webpack，可以实现我的要求？

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_39528029

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

webpack静态打包

Remons

08-26

876

webpack 静态化

webpack打包路径更改_vue项目之webpack打包静态资源路径不准确

weixin_28673669的博客

01-14

764

摘自：https://blog.csdn.net/viewyu12345/article/details/83187815问题将打包好的项目部署到服务器，发现报错说图片找不到。静态资源如js访问不到分析并且解决问题明确一点的就是，看到报错404，找不到静态资源，很明显，路径错误了。静态资源找不到如js文件资源打包路径有误，打包后的资源使用了绝对根目录路径，因此将项目部署到特定目录下，其引入的资源路...

参与评论您还未登录，请先登录后发表或查看评论

webpack打包图片，样式等静态资源文件

weixin_45966674的博客

01-27

1257

其实前面的都不足以展示出webpack在众打包工具中的优势 webpack的优势在于可以打包大规模项目文件以及静态资源文件这才是webpack独有的优势首先我们来创建一个webpack项目找一个文件夹在终端中输入 npm init 根据提示操作就会生成一个package.json 将webpack引入进来 npm install webpack webpack-cli --save-dev 然后在终端输入 npm install html-webpack-plugin --save

webpack 打包本地静态资源

yyj_ZS的博客

12-20

1948

如何使用webpack打包独立页面初始化首先我们需要在项目根目录执行npm init来初始化（一路回车）安装webpack 首先在项目文件夹打开命令窗，然后执行命令 npm install webpack webpack-cli --save-dev 在项目根目录新建webpack.conf.js用来配置webpack const path = require('path') //文件路径处理 const htmlWebpackPlugins = require('html-webpack-plug

vue-cli项目打包多个与static文件同级的静态资源目录（copy-webpack-plugin插件的使用）...

weixin_33670786的博客

12-14

593

场景业务要求能够直接通过 “域名+/file”的方式访问静态资源的html，然而产品绝对static暴露在url中不好看又不能直接将html放在static中。所以想到了既然static可以直接访问，那么给他新加几个文件目录应该不是问题。重点在webpack.dev.conf.js和webpack.prod.conf.js两个文件中，都有这样一段配置代码： // copy custom st...

静态文件放到打包之后的文件中，vue-cli3 脚手架搭建的项目

weixin_42508745的博客

12-31

639

前言：在vue中引入的文件，打包之后，总是会报这里文件找不到 1.在项目根目录新建statis文件夹，放入固定文件 2.webpack拷贝插件 copy-webpack-plugin 安装： npm install --save-dev copy-webpack-plugin 作用：在webpack中拷贝文件和文件夹： from 定义要拷贝的源文件 from：__di...

vue项目之webpack打包静态资源路径不准确

热门推荐

Cassie's blog

10-19

1万+

文章有点长，希望能够阅读下去，有所帮助。问题将打包好的项目部署到服务器，发现报错说图片找不到。 静态资源如js访问不到分析并且解决问题明确一点的就是，看到报错404，找不到静态资源，很明显，路径错误了。 静态资源找不到如js文件资源打包路径有误，打包后的资源使用了绝对根目录路径，因此将项目部署到特定目录下，其引入的资源路径无法被正确解析。解决：找到confi...

解决vue+webpack打包路径的问题

11-27

完成上述步骤后，Vue应用应该能够在`/vue-demo`路径下正常工作，且所有资源都能正确加载。请记住，这些更改可能需要根据你的具体服务器环境进行调整。如果你的服务器是Express.js，可以添加以下中间件来处理“ catch...

vue-cli3.0 vue打包部署非根目录时，静态资源图片路径错误

guyue_01的博客

05-13

2159

项目中需要把应用部署在子路径下，所以就需要修改vue配置和NGINX配置以子路径为market为例.eg.http://localhost:8000/market/ 1、第一步修改vue.config.js文件配置 publicPath属性 publicPath: "/market/", // 默认 / 修改为 market 修改router.js 配置base属性 export default new Router({ mode: 'history', base: process.

vue 分模块打包脚手架_关于vue-cli脚手架中webpack配置基础文件详解

weixin_30750349的博客

12-31

526

一、前言vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破，纯干料。重点章节点...

vue3+electron开发桌面应用，静态资源处理方式及路径问题总结

autumngold的专栏

02-27

2252

的引用解析为相应模块的路径，并且，如果项目配置了相应的loader，Webpack 还会处理文件内容，可能会转换这些静态资源为 base64 URI，或者将其复制到输出目录，并修改为最终路径。当你的网站或应用需要在多个子路径或不同的环境中部署，而没有固定的根路径时，设置。目录下的静态资源时，例如图片或样式文件，Webpack 会使用相应的加载器(loader)来处理它们。这里的静态路径是指直接写死的字符串，动态路径是指vue中的响应式数据生成的路径。静态路径没什么好说的，写相对路径，vue会自动处理好。

vue打包后文件里路径多了./static

05-01

而在打包后的文件中，路径多出了./static，这是因为Vue默认情况下会将所有静态资源放在static文件夹下，因此在打包后的文件中，所有静态资源的路径都会以./static开头。如果你不想在打包后文件的路径中看到./...

vue 项目引用static目录资源_vue 项目打包后访问静态资源路径问题

weixin_39790877的博客

12-21

1897

1.如项目发布到子域名 www.appprow.com/abc此时css资源路径应该为.content{background:url('abc/static/img/1.jpg')}需要修改config > index.js如图webpack publicPath 参数是用来，帮助你为项目中的所有资源指定一个基础路径，一但设定值以后，所有代码中通过requrie 或import 方式引...

webpack的static和assets目录区别

weixin_40012136的博客

09-15

1万+

图一：引用了三个图片，前两个是绝对路径，后一个是相对路径。图二：ctrl+h查找绝对路径在所出的包里面的位置。可以发现，页面中使用绝对路径时，图片文件不会被打包进js，图片文件需要被原原本本以图片格式存在static目录下，如果修改static中图片文件名，会导致页面找不到图片。图三：ctrl+h查找相对路径在所出的包里面的位置。可以发现，使

webpack4配置之——21：生产环境打包静态资源

kevin的博客

04-04

2678

如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里生产环境打包静态资源 一个完整的项目，不仅有开发依赖的各种文件需要打包上传到服务器上，也许还会有各种开发文档，项目中没引用过的图片、设计图、或者会有一些静态页面不需要编译，也要上传到服务器上，以方便预览。这里就需要用到插件copy-webpack-plugin，首先下载该插件： yarn add copy-webpack-plug...

关于webpack如何存放静态资源

OHRadiance的专栏

05-19

8733

启简明扼要记一下。之前涉及到vue项目中设置背景图片的问题。找来找去，发现只有backstretch最靠谱。进而引入jquery，又涉及到了“vue中怎么引入jquery”，上篇博文就是讲这个的。最后一切都搞定后，问题出现在backstretch无法获取到图片。承你可以在组件中直接引入本地的图片，如：<img src="../assets/logo.png"> 但在backstretch中

Web前端之Vue动态访问静态资源、静态资源的动态访问、打包、public、import、Vite、URL