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

HUALEI
15,548 阅读3分钟

前言

Require 是 CommonJS的语法，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 思否

avatar
文章
阅读
粉丝