Vue 项目中关于 Require 引入静态资源问题

·  阅读 5033

前言

RequireCommonJS的语法CommonJS 模块是对象,输入时必须查找对象属性。在项目中的webpack.config.js 等项目配置文件中使用的 require 属于 nodejs 范畴,而进入 index.js 后,加载的组件中的 require 都属于 webpack 的解析范畴。它的目标是鼓励代码的模块化,它使用了不同于传统 <script/> 标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以 module ID 替代 URL 地址。

Require 的使用

requirejs 主要 API:

  • define() – 该函数用于创建模块。每个模块拥有一个唯一的模块 ID (以 .js 结尾,比如 lib/hello.js、hello.js),它被用于 requirejs 的运行时函数。define 函数是一个全局函数,不需要使用 requirejs 命名空间。
  • require() – 该函数用于读取依赖。同样它是一个全局函数,不需要使用 requirejs 命名空间。
  • require.config() – 该函数用于配置 requirejS

image.png

疑问

let url = "@/assets/images/logo.png"
require(url)    //报错

let url = "logo.png"
require("@/assets/images/"+url); //正确
复制代码

很诡异,命名拼接后的路径完全一样,但是打开页面 F12 调试时,发现路径被编译成文件名+一些字符编码.png,这可能是通过 webpack 编译后,生成的路径已经不是原来的那个路径了,而通过 require("src/assets/images/logo.png") 中写绝对路径,会被原样保留并自动找到并加载 dist/public/image/logo.2d32dsa2.png 文件,但如果 require 中放入的是变量 URL,编译打包后就找不到原来的路径了,则报错!

问题分析

关于静态资源放在 assets 还是 static 的问题:

static 目录下的文件不会经过编译。项目在经过打包后,会生成 dist 文件夹,static 中的文件只是复制了一遍而已,由于 webpack 遵守的是 CommonJS 的规范,所以通过 js 动态添加 assets 目录中的静态资源必须要使用 require 才行,否则会被当做模块依赖。

    assetsURL: require("../../../assets/images/logo.png")
    staticURL: "../../../assets/images/logo.png"
复制代码
    <style scoped>
    // 渲染前
    .login-wrap {
      background-image: url("./titlea.png");
    }
    </style>

    // 渲染后的 css
    .login-wrap[data-v-70c98a68] {
      background-image: url(/static/img/titlea.1e9fa570.png);
    }
复制代码

问题解决

这个问题凡是第一次遇到都会觉得很奇形怪状,我相信很多人碰到之后会不自觉地说出 WTF ……

问题的出现主要是因为修改页面后,webpack 进行编译,等待编译完成后,需要进行工程的打包,等待打包完成后,才能热加载并刷新页面。

如果 require 中传入的是一个变量,他有可能是计算机系统中的任何目录下的任何文件,那么在打包静态资源多时他有可能将你的电脑整个磁盘遍历一遍,所以至少给出在哪个确定的路径目录下,这样才能精确地将哪个路径下的对象文件打包,然后在代码运行时,直接用对应文件名生成正则匹配,因为在打包后的文件可能存在哈希值,也就是文件名后缀的一大串莫名的数字字符组合。

总结

综上,请记住尽可能详细的指定 require 中的路径,然后拼接静态资源文件名变量

结尾

XDM,啥也不说了这个坑我先踩为敬 [含泪.jpg] ……

撰文不易,欢迎大家点赞、评论,你的关注、点赞是我坚持的不懈动力,感谢大家能够看到这里!Peace & Love。

参考

详解vue中静态资源的路径问题(深度好文) - SegmentFault 思否

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改