VUE 打包后相对路径的引用

最新推荐文章于 2024-08-10 11:12:25 发布
最新推荐文章于 2024-08-10 11:12:25 发布
阅读量5.1k 收藏 2
点赞数 1
分类专栏： 路径 VUE 文章标签： VUE 路径
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Woniu_Yu/article/details/81904987
版权

vue打包部署后，访问是需要加上项目名

这时候访问是使用绝对路径就会处问题了。

解决办法

把引用路径改为相对路径

解决JS、CSS等资源

打开build文件夹下的webpack.prod.conf.js，找到output，添加“ publicPath: ‘./’,”即可

或者打开config文件夹下的index.js，找到build，修改“assetsPublicPath: ‘./’”即可

解决图片的引用问题

打开build文件夹下的utils.js，如下修改即可

Woniu_Yu
关注
专栏目录
vue实现vue组件打包并动态引入远程组件
qq_32339317的博客
11-11 1496
vue实现vue组件打包并动态引入远程组件
Vue中的打包配置引用路径的和背景图片路径问题(详细)
fortune丶的blog
01-13 3123
1.找到文件路径  config --> index.js  --> build -> assetsPublicPath 中的 '/' 成为 './' (注意：两个assetsPublicPath) 2.在build -> util.js 里找到 ExtractTextPlugin.extract 增加一行：publicPath: '../../'，主要解决背景图片路...
Vue项目打包组件并上传到npm在其他项目和下载引用 步骤流程
热门推荐
黄钟飞的博客
09-19 1万+
首先问题：开发中我们往往需要做某些功能，这个功能可能会出现很多次，也会出现在不同的项目。需要使用时候又不想重新写，怎么办呢？ 解决思路:  把这个特殊的需求功能做成属于自己的组件，当下次需要的我们之间去使用它。那么我们就打包他上次到管理库npm 1.首先你要把你的想打包的项目写完，或者不会报错情况下进行。    修改你项目主目录下的package.json文件在文件添加一个程序的入口配置 如...
Vue3+vite打包配置及部分打包优化~
最新发布
m0_62626838的博客
08-10 1009
1、步骤一：配置base。这里配置base主要是修改根路径，一般我们在开发环境中引用静态资源可能使用的是绝对路径，但是一旦打包部署到服务器上后可能会报404,无法正确的获取的资源。2、步骤二：可根据需要配置组件及静态资源路径别名（若配置了路径别名使用方法和typescript的类型别名一样，直接替换原路径即可）这里介绍的是vite项目的打包配置，若想了解webpack打包配置可看我的其他博客。（下面来介绍下vite打包配置的步骤）3、步骤三：配置生产环境移除console.log。
vue 打包配置相对路径
qq_44663401的博客
06-01 2779
vue 打包配置相对路径。
vue-cli4 下项目打包如何部署到相对目录
u013776700的博客
08-02 334
你想让项目部署后，位于www/data目录下，而根目录是www,这个时候，那就可以将publicPath配置成为“/data”,这个时候主站访问域名假如为： http://www.test.dev则你的站点访问目录则为： http://www.test.dev/data， 这个时候实际你的静态资源目录就是相对于跟目录下的data目录。这个模板中的<%=BASE_URL %>并不会被解析成为当前的目录即 “./”，如果有这种需求部署的同学可能就很恼火，经过我的实践，实际上是我们对相对目录的理解偏差了。
【VUE】vue打包后引入js和css用相对路径引入
我是Superman丶的博客
04-06 1010
【VUE】vue打包后引入js和css用相对路径引入。解决方案 vue.config.js。原因 loadUserOptions。
解决vue单页面应用打包后相对路径、绝对路径相关问题
11-20
在开发Vue单页面应用时，面对打包后的相对路径与绝对路径问题，主要是因为部署环境的差异和反向代理的需求。通常，默认情况下，Webpack与Vue CLI打包的资源引用使用的是绝对路径，这在本地开发和直接部署到服务器根...
解决Vue打包之后文件路径出错的问题
08-27
默认情况下，Vue CLI会将所有产出文件放置在一个根目录下，这可能导致在非根目录下运行时，相对路径失效。特别是当你将应用部署到子目录或CDN时，静态资源的URL需要进行相应调整。 针对这个问题，我们可以从两个...
vue和webpack打包项目相对路径修改的方法
08-27
// 添加此行，设置CSS中引用的资源的相对路径 return options; }); } }, ``` 上述代码中，我们将`css-loader`的`publicPath`设置为` '../../'`，这会使得CSS中的相对路径向上回溯三层，从而适应新的部署位置...
vue webpack打包后图片路径错误的完美解决方法
10-17
`，那么在打包后，这些相对路径会被转换为`url(static/img/logo-index.2fbf2.png) no-repeat`，导致图片无法找到。 解决这个问题的方法分为两步： 1. 修改`config/index.js`文件中的`assetsPublicPath`配置。将`...
HTML的a标签href属性指定相对路径与绝对路径的用法讲解
09-28
href是链接前端文件的一个最常用的重要属性,这里我们就来看一下HTML的a标签href属性指定相对路径与绝对路径的用法讲解,需要的朋友可以参考下
vue中引入路径用法及说明
zzy7075的专栏
03-07 2849
vue中引入路径@的用法及说明
vue（react）多项目公用组件方案之packagejson依赖使用git地址 git仓库组件
sdad2154的博客
11-26 2005
即可在src的目录下生成一个index.js文件，此文件即为导出组件的入口，内容如下（写入时间注释是为了确保git commit一定有东西提交）最后一点 git总是出问题拉去不下来 然后就需要使用公共秘钥大概是这个意思 对git现在不太明白 有了解的可以评论一下 本项目是参考的。因为组件一般样式比较少，所以直接打包进js中，在vue.config.js中写入。注意这行代码可能会报错 大概意思git失败的原因执行下面的命令。script.js文件为写入导出文件的脚本文件，其内容如下。
vue项目package.json配置
BUG小太阳
04-19 2359
场景：菜狗配置Jenkins运行测试项目命令‘npm run build’项目显示为正式环境 问题：运行命令配置错误导致项目环境错误 解决思路：根据不同的环境配置不同的运行脚本命令 本地：npm run serve 测试：npm run stage 正式：npm run build 配置环境（与src同级目录） .env.development NODE_ENV='development' # must start with VUE_APP_ VUE_APP_ENV = 'development' .
用vue写一个npm包(package)，发布及引用
weixin_44434938的博客
02-20 2975
用vue写一个npm包(package)，发布及引用
【vite】vite打包优化：
SunPeng的博客
06-16 2529
【vite】vite打包优化：
vue相对路径打包
likuntao123的博客
12-31 667
vue相对路径打包 相对路径打包的意义：主要是项目打包以后可以直接在本地运行。 首先，修改config => index.js文件 其次，修改build => util.js文件（添加publicPath） ...
vue 打包相对路径
温柔养猫客
06-19 4007
vue 开发完成后，需要build打包成静态文件，出现路径问题的解决办法 1.修改生产环境引用相对路径，打开build/webpack.prod.conf.js output:增加publicPath:'./' 或者在config文件夹下的index.js中修改 assetsPublicPath:'./' 2.修改css资源引用的相对路径，打开build/utils.js，找到以下...
vue打包后css路径_vue打包后引入js和css用相对路径引入
05-24
需要注意的是，如果你在 Vue 中使用了 publicPath 配置项，那么在引用文件时，你需要使用该配置项的值来构建相对路径。例如，假设你在 Vue 中设置了 publicPath 为 "/myapp/"，那么在引用文件时，应该使用以下路径：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值