uni-app 4.0.7 cli vue2 app-vue 项目 css url()方法 资源定位有问题,nvue 正常
uni-app 4.0.7 cli vue2 app-vue 项目 css url()方法 资源定位有问题,nvue 正常
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Mac | 14.3.1 | CLI |
操作步骤:
4.0.7 cli vue2 app-vue 无法显示 uni-icons 图标
第三方的icons组件有同样的问题,如 uv-icon,看起来是静态资源处理的问题
预期结果:
正常显示图标
实际结果:
无法显示 uni-icons 图标
bug描述:
看了 4.0.7 cli vue2 app-vue 项目下的 uni-icons 代码,如下:
@font-face {
font-family: uniicons;
src: url(storage/emulated/0/Android/data/com.gaojiua.bd/apps/UNIxxx/www/assets/uniicons.9fc7eb72.ttf);
}
src 地址再前面加个 / 可正常显示,如下
/storage/emulated/0/Android/data/com.gaojiua.bd/apps/UNIxxx/www/assets/uniicons.9fc7eb72.ttf
更多关于uni-app 4.0.7 cli vue2 app-vue 项目 css url()方法 资源定位有问题,nvue 正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html
解压附件里的js文件,替换test-url/node_modules/@dcloudio/vue-cli-plugin-uni/lib/app-plus/getUrl.js
然后试试
更多关于uni-app 4.0.7 cli vue2 app-vue 项目 css url()方法 资源定位有问题,nvue 正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这个问题已经很久了啊,3.xx 的时候就出现了
回复 d***@gaojiua.com: 稍后会发布cli alpha版本修复
回复 DCloud_UNI_FengXY: 亲,正式版呢,我们平常主要走 热更新 的方式,还是想找个稳定的正式版~
url() 静态资源查找有问题
地址前加上 / 恢复正常
源码里怎么写的
回复 DCloud_UNI_FengXY: background: url(’@/static/university/20201130191121.webp’) no-repeat center;
icon 里面是
回复 d***@gaojiua.com: 你这是什么工程,cli创建的,还是HBuilderX创建的,我这里测试没发现问题,可以提供一个测试项目
回复 DCloud_UNI_FengXY: cli 项目
回复 d***@gaojiua.com: 使用 @dcloudio/uvm 更新到最新再试试呢
回复 DCloud_UNI_FengXY: 附件放在下面的评论区了
顶,何时修复
看一下这个问题
@DCloud_UNI_FengXY
cli 创建的 vue2 项目,在 APP-VUE 下真机,css url 失效
@DCloud_heavensoft
在 cli vue2-app 项目下,这个问题从今年 8 月份 3.8.12 版本就开始有问题,陆陆续续一直没有修复,要么是 app-vue 有问题,要么是 app-nvue 不能用,你们提高一下优先级呗,测全一些
要是你们 cli 维护的力度不够,我们转 hbuilder 也行呀…给个方案大佬
HBuilderX的项目是没问题的,问题是出在cli工程,你的cli依赖的@vue/cli-plugin-babel,@vue/cli-service等版本是5.0.0,而HBuilderX内置的是4.2.0, 发版时会对HBuilderX创建的项目进行各种测试,而cli的三方依赖版本很多时候不太可控,很难确保每次版本更新都跟三方依赖完美匹配。
回复 DCloud_UNI_FengXY: 了解,HbuilderX 每个版本的依赖可以公布吗? 我们可以先在 cli 项目中固定下来,我理解现在如果把我们的项目从 cli 改成 Hbuilder 工作量还是挺大的
回复 d***@gaojiua.com: 可以参考 HBuilderX/plugins/uniapp-cli/package.json 中的版本依赖
回复 DCloud_UNI_FengXY: 解压安装包文件之后没有找到对应的项目目录
回复 d***@gaojiua.com: 插件是独立的,可以新建一个uni-app vue2项目,然后运行,会自动下载对应插件
回复 DCloud_UNI_FengXY: 好的,感谢。不过大佬,这个bug啥时候修复呀,我看4.11 alpha并没有带这个修复
这能不能被确定为 bug 呀,请问啥时候可以修复
顶顶
顶一顶
HBuilderX 4.12.2024041009-alpha 已修复。
在 uni-app 4.0.7 中使用 cli
模式开发 vue2
项目时,如果在 app-vue
项目中遇到 css
的 url()
方法资源定位问题,而 nvue
正常,可能是由于以下几个原因导致的:
1. 路径问题
url()
方法中的路径可能是相对路径或绝对路径。如果你使用的是相对路径,确保路径相对于当前 CSS 文件的位置是正确的。如果使用的是绝对路径,确保路径是从项目根目录开始的正确路径。
2. 资源目录配置
在 vue.config.js
中,可能需要配置 publicPath
或 assetsDir
来确保资源路径正确。
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
assetsDir: 'static',
// 其他配置
}
3. ~
符号的使用
在 uni-app
中,~
符号通常用于引用 node_modules
中的资源。如果你想引用项目根目录下的资源,可以使用 @
符号。
/* 错误 */
background-image: url('~@/assets/image.png');
/* 正确 */
background-image: url('@/assets/image.png');
4. url()
中的路径解析
uni-app
在编译时会对 url()
中的路径进行解析。如果你发现路径解析不正确,可以尝试使用 require
来引入资源。
background-image: url(require('@/assets/image.png'));
5. 检查 manifest.json
配置
确保 manifest.json
中的 app-plus
配置正确,尤其是 http
和 https
的配置。
{
"app-plus": {
"http": {
"timeout": 60000
},
"https": {
"timeout": 60000
}
}
}
6. 检查 webpack
配置
如果你自定义了 webpack
配置,确保 url-loader
或 file-loader
的配置正确。
module.exports = {
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => {
// 修改默认的 limit 值
options.limit = 8192;
return options;
});
}
}
7. 检查 HBuilderX
版本
如果你使用的是 HBuilderX
,确保它的版本与 uni-app
的版本兼容。有时候,升级 HBuilderX
可以解决一些编译问题。
8. 重新编译
有时候,问题可能是由于缓存或编译错误导致的。尝试删除 dist
目录并重新编译项目。
rm -rf dist
npm run build