引入一个js写的function函数报错 404 找不到wx_share.js这个资源的原因

先说结论：

我们在打包（本地、开发、测试、生产打包）时，document.ejs入口文件引入的路径不会被webpack打包工具解析，而打包会使得文件结构会发生变化，从而导致相对文件路径引用地址出错！（如果是./在当前目录下一般不会错，因为打包后就是在同一个文件夹下，具体看你是否改动过打包文件结构了，默认是没问题的）

 

过程：

我用umi.js写了一个react 移动端h5页面，做微信分享

首先我在document.ejs（等同于index.html）引入了wx对象的官方cdn地址js文件（这个文件是绝对路径）

其次我接着引入了如下js文件：

<script src="../utils/wx_share.js"></script>

wx_share.js文件内容如下：

/**
 *
 * @param {string} imgUrl 图片服务器路径
 * @param {string} title 标题
 * @param {string} desc 描述
 */
import envConfig from '../env';

export function weChatShare(imgUrl, title, desc) {
  console.log('window.wx', window.wx);
  // var newUrl = window.location.href.split('#')[0]; // newUrl = encodeURIComponent(newUrl);
  var newUrl = window.location.href;

  var oHttp = window.location.protocol;
  var locHost = window.location.host;

  // var oimgUrl = oHttp + '//' + locHost + imgUrl; // 测试
  var oimgUrl = imgUrl; // 单独图片路径 其余两种会携带主机地址

  console.log('地址oHttp, locHost, imgUrl', oHttp + '******' + locHost + '******' + imgUrl);

  console.log('图片地址', oimgUrl);

  console.log('网址', newUrl);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', ''.concat(envConfig.wechatHost, '/m/rest/wechat/getJssdkSignature'));
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.send('url='.concat(newUrl));

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log('请求成功了！xhr', xhr);
      var data = JSON.parse(xhr.responseText);
      console.log('微信config', data);

      if (data.status === '1') {
        var newAppID = data.data.appid;
        var newTime = data.data.timestamp;
        var newNonceStr = data.data.nonceStr;
        var newSign = data.data.signature;
        console.log(newAppID, newTime, newNonceStr, newSign, window.wx, newUrl);

        console.log('wx对象', window.wx);
        window.wx.config({
          debug: false,
          appId: newAppID,
          timestamp: newTime,
          nonceStr: newNonceStr,
          signature: newSign,
          jsApiList: [
            //调用了两个分享接口,分别是朋友圈和个人
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
          ],
        });
        window.wx.ready(function () {
          var obj = {
            title: title,
            //  标题
            desc: desc,
            //  描述
            link: newUrl,
            //  分享的URL，必须和当前打开的网页的URL是一样的
            imgUrl: oimgUrl, //  缩略图地址
          };
          window.wx.onMenuShareAppMessage({
            title: obj.title,
            desc: obj.desc,
            link: obj.link,
            imgUrl: obj.imgUrl,
            success: function () {
              console.log('success');
            },
            fail: function (error) {
              console.log('fail', error);
            },
            cancel: function (some) {
              console.log('cancel', some);
            },
          });
          window.wx.onMenuShareTimeline({
            title: obj.title,
            desc: obj.desc,
            link: obj.link,
            imgUrl: obj.imgUrl,
            success: function () {
              console.log('success');
            },
            fail: function (error) {
              console.log('fail', error);
            },
            cancel: function (some) {
              console.log('cancel', some);
            },
          });
        });
        window.wx.error(function (res) {
          console.log(res); // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
      }
    } else {
      console.log('请求未成功！xhr', xhr);
    }
  };
}

document.ejs内容如下： 

结果在控制台报了如下错误：

Failed to load resource: the server responded with a status of 404 (Not Found)

 

GET http://xxx.xxx.com/utils/wx_share.js net::ERR_ABORTED 404 (Not Found)

 

为什么报错呢？

原来是因为，我们在打包（本地、开发、测试、生产打包）时，文件结构会发生变化，而相对路径则可能会导致文件路径出错！（如果是./在当前目录下一般不会错，因为打包后就是在同一个文件夹下，具体看你是否改动过打包文件结构了，默认是没问题的）

那要怎么改才是正确的？

以umi.js为例，静态资源文件，统一放到public文件夹下（也就是，该文件没有引用其他相对路径依赖的文件。例如cdn jquery库）我们一般在document.ejs(即index.html)中的head或者body底下直接script引用。而动态资源文件则使用import去引入。