Vue CLI3搭建的项目中路径相关问题的解决

<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >

/* 在需要的组件中定义 baseUrl，然后在 <template> 下使用 */
<template>
  <div id="app">
    <img :src="/UploadFiles/2021-04-02/imgUrl">

在其他 js 模块中使用




import axios from 'axios';

const baseUrl = process.env.BASE_URL;

axios.defaults.baseURL = `http://www.example.com${baseUrl}api/`



在样式文件中使用（以 sass/scss 为例）


因为 sass 文件中无法获取环境变量或 webpack 内的配置，于是最直接的方法就是自定义一个变量，然后在每个需要使用到它的文件引用它。


// config.scss
$baseUrl: "/";

// icon.scss

@import "config"

.icon-test {
  display: inline-block;
  background: url($baseUrl + 'imgs/icon_test.png') no-repeat;
  width: 10px;
  height: 10px;
}




这样做还是有比较大的麻烦：

  
如果生产环境和开发环境的 baseUrl 不同，每次转换环境去编译都要去手动修改这个变量，十分之麻烦而且可能出现错误；
  
两处地方相同的定义，不方便代码的维护；
  
在后续讲到的关于 相对路径 的坑会涉及到，每次引用 config.scss 的路径并不一定是一样的，且很容易出现编译错误；

那么，有没有什么办法能避免人工操作、避免多次的定义并且避免使用可能潜在错误的引用呢？幸亏的确是有的！ sass-loader 提供了一个 data 选项，可以为全局注入变量或样式文件;


// vue.config.js

const baseUrl = process.env.NODE_ENV === 'production' "${baseUrl}";`
      }
    }
  }
}




这样我们就可以在全局的 `sass` 文件中使用 `$baseUrl` 这个变量了，而且在只定义一次的情况下，能根据编译环境变化而变化。
使用相对路径


使用相对路径也会存在一些坑，接下来会列举常见的关于相对路径的坑与解决方法：
JavaScript 动态引用资源，编译没报错，但页面上请求返回 404


有时候我们需要使用 JavaScript 动态的引用某些资源，且希望这些资源被 webpack 一同打包，我们先看这种做法：


computed: {
  background () {
    return `./bgs/${this.id}.jpg`
  }
}



我们会发现打包没报错，但是在页面上可以发现这些资源的请求都是 404。这是因为类似 ./bgs/${this.id}.jpg 这样的动态字符串在打包阶段不会被 webpack 识别为依赖，资源也就不会被打包了。为了让 webpack 识别这些依赖，我们可以这样做:


computed: {
  background () {
    return require('./bgs/' + this.id + '.jpg')
  }
}



通过使用 require() 让 webpack 将括号内的 URL 识别为一个依赖并传入对应的 loader 进行处理。
要特别注意，以上的例子中，./bgs/ 目录下的所有图片都会被打包，因为 webpack 无法得知页面在运行时会使用哪张图片，所以 webpack 会把所有的图片都打包了。


在 sass 中使用相对路径引用图片或字体文件，编译报错


先来看一个例子：


// 文件目录
// src
// |--assets
// |  |
// |  |-fonts
// |  |  |- iconfont.eot
// |  |
// |  |-css
// |    |
// |    |-iconfont.scss
// |
// |--app.vue




// iconfont.scss
@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont.eot");
  ...
}




// app.vue
<style lang="scss">
@import './assets/css/iconfont.scss'
</style>


往往我们在打包的时候会报错（以上例子会报错），说找不到 iconfont.eot。 sass-loader 文档中有对 url() 进行了单独的说明：

Since Sass/libsass does not provide url rewriting, all linked assets must be relative to the output.
If you're just generating CSS without passing it to the css-loader, it must be relative to your web root.

If you pass the generated CSS on to the css-loader, all urls must be relative to the entry-file (e.g. main.scss).



大致意思就是， sass-loader 并不提供 url 的重写，所有的 scss 文件被 sass-loader 处理成最终的 CSS 后（编译过程中 url 不会被重写即保持原样），再传递给 css-loader 处理。也就是说，所有的 url 都是相对于输出的！在 Vue CLI 搭建的项目中，它们都是相对于使用这些 scss 文件的 vue 文件的。对于上例，是相对于 app.vue 的，因此报错。我们会很自然的会希望路径的引用是相对于 scss 文件本身的，sass-loader 文档中也给出了解决方案：

Add the missing url rewriting using the resolve-url-loader. Place it before the sass-loader in the loader chain.

Library authors usually provide a variable to modify the asset path. bootstrap-sass for example has an $icon-font-path. Check out this working bootstrap example.



第一个方法：使用 resolve-url-loader 来弥补 sass-loader 缺失的 url 重写功能，注意要放到 sass-loader 以前调用。


第二个方法：Library 作者一般都会提供变量，用来设置资源路径，如 bootstrap-sass 可以通过 $icon-font-path 来设置。参见this working bootstrap example。
这样看来解决的思路有两种：

  
写 url 的时候就写 vue 文件相对于资源的路径。这种方法较为暴力，当项目层级复杂了之后容易写错路径（加上现有的编辑器、IDE应该认为你写的路径是错误的）。当同个 scss 文件被多个不同层级的 vue 文件引用的时候，这种暴力的方法就行不通了！
  
使用第三方库补充 sass-loader 的路径重写功能，让路径的引用是相对于当前 scss 文件本身的。这个方法能较好的解决问题。

在这里提供一下我喜欢的方法。与其考虑 让路径的引用是相对于 scss 文件本身 或 让路径直接相对于 vue 文件，我们可以换个思路，让所有路径都是以根目录往下找，并让 webpack 对路径进行重写，但是直接用 /src/ 这种绝对路径的写法会让这些资源不被 webpack 打包。在前文提及到的，webpack 有个强大的机制，也就是 ~，通过在 url 前面添加 ~ 可以告诉 webpack 要把它当做一个模块来处理，也就是会被 webpack 打包。配合 webpack 提供的别名 @（/src），我们可以对上例做修改：


// iconfont.scss
@font-face {
  font-family: "iconfont";
  src: url("~@/assets/fonts/iconfont.eot");
  ...
}



这样子，通过 webpack 对模块的处理，可以正确通过编译！这样做的好处是可大大避免书写相对路径可能产生的错误，每次只需“无脑”从根目录往下找就是了，又可以减小依赖、减少配置项。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。