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

28 回复

解压附件里的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


修改后是正常的,4.0.8发版修复了吗?

这个问题已经很久了啊,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 项目中遇到 cssurl() 方法资源定位问题,而 nvue 正常,可能是由于以下几个原因导致的:

1. 路径问题

url() 方法中的路径可能是相对路径或绝对路径。如果你使用的是相对路径,确保路径相对于当前 CSS 文件的位置是正确的。如果使用的是绝对路径,确保路径是从项目根目录开始的正确路径。

2. 资源目录配置

vue.config.js 中,可能需要配置 publicPathassetsDir 来确保资源路径正确。

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 配置正确,尤其是 httphttps 的配置。

{
  "app-plus": {
    "http": {
      "timeout": 60000
    },
    "https": {
      "timeout": 60000
    }
  }
}

6. 检查 webpack 配置

如果你自定义了 webpack 配置,确保 url-loaderfile-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
回到顶部