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;

}
相关推荐
spionbo2 分钟前
前端解构赋值避坑指南基础到高阶深度解析技巧
前端
用户4099322502126 分钟前
Vue响应式声明的API差异、底层原理与常见陷阱你都搞懂了吗
前端·ai编程·trae
开发者小天8 分钟前
React中的componentWillUnmount 使用
前端·javascript·vue.js·react.js
sunly_12 分钟前
Flutter:视频预览功能
javascript·flutter·音视频
永远的个初学者42 分钟前
图片优化 上传图片压缩 npm包支持vue(react)框架开源插件 支持在线与本地
前端·vue.js·react.js
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ43 分钟前
npm i / npm install 卡死不动解决方法
前端·npm·node.js
Kratzdisteln1 小时前
【Cursor _RubicsCube Diary 1】Node.js;npm;Vite
前端·npm·node.js
杰克尼1 小时前
vue_day04
前端·javascript·vue.js
明远湖之鱼2 小时前
浅入理解跨端渲染:从零实现 React DSL 跨端渲染机制
前端·react native·react.js
悟忧2 小时前
规避ProseMirror React渲染差异带来的BUG
前端