关于Vue3 + Ts 项目 遇到 关于路径动态加载 和 组件拷贝关系问题的记录

问题

• 再写一个 v3 + ts 项目时遇到一个问题

在项目的assets 文件夹下 我放入了音频 和 图片

• 同时， 在vuex 定义好数据

• 接口限制

/*
	@ params {
		id : 唯一音乐id
		playUrl: 音乐路径
		name: string;
  		singer: string;
  		imageUrl: string;
	}
*/
export interface MusicData {
  id: number;
  playUrl: string;
  name: string;
  singer: string;
  imageUrl: string;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 组件中使用（循环之后拿出的结构）
  

    // 监视来自父组件的变化
    watch(
      () => props.musicData,
      (newVal) => {
         musicInfo = newVal ;

        musicInfo.imageUrl = require("@/assets/music/imageUrl/" +
          newVal.imageUrl.replace("@/assets/music/imageUrl/", ""));

      },
      { immediate: true }
    );
1
2
3
4
5
6
7
8
9
10
11
12

这里要引入一个注意点
直接将 @/xx/xxx/xx 路径在页面加载是加载不了的， 因为@是需要在打包时解析为/src的， 这里如果不使用require加载解析的话，打包后图片路径就是字符串的@/xxx/xx/xx， 打包后我们就不能找到webpack生成文件目录的文件了 —> 其实就是资源的动态加载

这里就使用require先加载路径后再放入img中，注意require中不能是变量（webpack 是一个构建工具，而他的核心思想是一切都是模块，根据模块的依赖关系进行打包，而这些模块必须要是本地资源，既然是本地资源，就肯定是确定的资源，而没有必要使用未知的变量资源，详细介绍 https://www.zhihu.com/question/421711093）

如

 watch(
      () => props.musicData,
      (newVal) => {
         musicInfo = newVal ;

        musicInfo.imageUrl = require(newVal); /// xxx
//Uncaught (in promise) Error: Cannot find module '@/assets/music/imageUrl/m1.jpg'

      },
      { immediate: true }
    );
1
2
3
4
5
6
7
8
9
10
11

到这一步 页面上已经有了加载的图片了

可是只要切换路由，这边图片便不能加载了，抛出错误
Cannot find module './/img/m1.4ee940fd.jpg' at webpackContextResolve
我的代码中， 每次切换路由，只要切换回来都会触发监视， 从而重新加载， 每次加载的数据都还是直接从store中获取的，应该都是（@/xx/xxx/格式的），按道理说不应该出现路径错误的

这里再放一下代码
  watch(
      () => props.musicData,
      (newVal) => {
         musicInfo = newVal ; // 监视到 ， 则更新

        musicInfo.imageUrl = require("@/assets/music/imageUrl/" +
          newVal.imageUrl.replace("@/assets/music/imageUrl/", ""));

      },
      { immediate: true }
    );
1
2
3
4
5
6
7
8
9
10
11
12

然后我打印了监视的数据和赋值的数据变量

  // 监视来自父组件的变化
    watch(
      () => props.musicData,
      (newVal) => {
        musicInfo = newVal;
        // 加载前
        console.log("#", musicInfo.imageUrl, newVal.imageUrl);

        musicInfo.imageUrl = require("@/assets/music/imageUrl/" +
          newVal.imageUrl.replace("@/assets/music/imageUrl/", ""));
     // 加载后
        console.log("?", musicInfo.imageUrl, newVal.imageUrl);
      },
      { immediate: true }
    );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

result 初次加载

加载前结果
# @/assets/music/imageUrl/m1.jpg @/assets/music/imageUrl/m1.jpg
加载后结果
? /img/m1.4ee940fd.jpg /img/m1.4ee940fd.jpg
1
2
3
4

一切正常

然后切换路由重新加载
result

# /img/m1.4ee940fd.jpg /img/m1.4ee940fd.jpg
1

就只有加载前的结果了， 但是也很清楚与问题所在了 第二次加载没有按我所设想的那般传入我设定好的原始路径， 后面replace替换自然就出现了问题，导致报错找不到路径

？？？可是我进行了替换值（每次渲染），为什么获得的时其他值？

原因在于store中的数值object引用问题，前面代码中的浅拷只是赋值了引用地址（store的）， 所以当我更改替换musicInfo路径时实际上也是更改了store数值的那个引用地址数据，

知道后解决就简单了， 给一个深拷就行

因为拷贝对象是一个对象，可以使用for in 实现

---

问题解决