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;

}
相关推荐
IT_陈寒16 分钟前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿17 分钟前
react 实现插槽slot功能
前端
stoneship40 分钟前
Web项目减少资源加载失败白屏问题
前端
DaMu1 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员1 小时前
一文读懂Font文件
前端
Asort1 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer1 小时前
什么是 React 中的远程组件?
前端·react.js
真夜1 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js