qiankun 乾坤主应用访问微应用css静态图片资源报404

发现static前没有加我指定的前缀

只有加了后才会出来

解决方案:

env定义前缀

.env.development文件中

bash 复制代码
# static前缀
VUE_APP_PUBLIC_PREFIX=""

.env.production文件中

bash 复制代码
# static前缀
VUE_APP_PUBLIC_PREFIX="/szgl"

settings文件是封了一下src\settings.js

javascript 复制代码
module.exports = {

  /**
   * public文件前缀
   */
  publicPrefix: process.env.VUE_APP_PUBLIC_PREFIX

}

页面写入

javascript 复制代码
import settings from '@/settings'
  data () {
    return {
      cameraBackground: `url(${settings.publicPrefix}/assets/img/camera.png)`,
      cameraHover: `url(${settings.publicPrefix}/assets/img/camera-hover.png)`,
}}
css 复制代码
.camera {
  position: absolute;
  width: 80px;
  height: 80px;
  cursor: pointer;
  // background-image: url('@/assets/img/camera.png');
  background-image: v-bind(cameraBackground);
  background-size: cover;

}
相关推荐
小二·7 小时前
前端测试体系完全指南:从 Vitest 单元测试到 Cypress E2E(Vue 3 + TypeScript)
前端·typescript·单元测试
pas1367 小时前
18-mini-vue element
前端·vue.js·ubuntu
C_心欲无痕7 小时前
js - generator 和 async 函数讲解
开发语言·javascript·ecmascript
哟哟耶耶7 小时前
Plugin-webpack内置功能split-chunks-plugin配置打包代码分割
前端·webpack·node.js
青梅主码7 小时前
给 AI 打个分,就能搞出估值17亿独角兽??刚刚完成1.5亿美元A轮融资,这个AI 评测平台彻底火了!LMArena
前端
GUIRH7 小时前
Vue指令
前端
林恒smileZAZ7 小时前
前端技巧:检测到省略号文本自动显示 Tooltip
开发语言·前端·javascript
Zzz不能停7 小时前
阻止冒泡和阻止元素默认行为的区别
开发语言·前端·javascript
攀登的牵牛花7 小时前
前端向架构突围系列 - 架构方法(三):前端设计文档的写作模式
前端·架构
m0_528723817 小时前
如何避免多次调用同一接口
前端·javascript·vue.js·性能优化