在 项目开发的过程中，经常需要引入各类外部，比如我们程序开发用到的、等，这些外部会被我们放在根目录下面的 static夹中，或者 src目录下的 static 夹中。

将这些外部应用到我们的项目中，就需要使用路径引入，看起来简单，但实际操作有很多需要注意的地方。本小节我们来学习在各种场景下面如何引用这些外部以及需要注意的一些问题。

在 <template> 内引入静态资源，可以用相对路径和引入。比如用 <image> 的 src 引入，或者使用<video> 的 src 引入视频。我们来分别演示一下。

实例：

<template>
  <view>
    <!-- /static是指根目录下的static目录 -->
    <image src="/static/imooc.png"></image>
  
    <!-- 在cli项目中，/static指的是src目录下的static目录，路径前面需要再加@ -->
    <image src="@/static/imooc.png"></image>
  </view>
</template>

使用相对路径可能会出现路径查找失败的情况，并且在支付宝组件内 <image> 不可以使用相对路径。所以我们日常开发过程中，尽量使用，避免不必要的。
实例：

<image src="../../static/imooc.png"></image>

需要注意以下几点：

日常开发过程中，我们经常会在js中或者在 .vue 中的 <script> 内引入第三方js。可以使用相对路径和引入。

应用 js ，直接使用 / 开头的路径，会报“查找失败”的，需要使用 @开头的路径。@开头的路径，指向的是项目的根目录。

实例：

<script>
  //正确实例
  import con from '@/common/con.js'
  
  //实例
  import con from '/common/con.js'
  
  export default {
  }
</script>

实例：

import con from '../../common/con.js'

实例：

// con.js
const host = 'http://imooc.com'
export default host

// 引入并
<script>
import host from '../../common/con.js';
export default {
onLoad() {
console.log(‘打印出js的’,host)
}
	}
</script>

打印结果：
的时候，明明已经成功引入了，却不会成功打印出js中的。这个时候可以检查一下是否在js中使用 export 将变量暴露出去了。

因为js是独立的，该内部的所有的变量外部都无法。如果希望某个变量，必须通过export，不然将会读取失败。

在 css 中或者 <style> 内引入 css 时，可以使用相对路径或者。引入 scss、less 也是一样的。

需要注意的是，只有 HBuilderX 2.6.6-alpha 版本开始才，旧版本。

我们使用 @import 语句引入 css ，用;表示语句结束。
实例：

<style>
    /* 相对路径 */
    @import "../../common/imooc.css";
 
    /* ，旧版本 */
    @import url('/common/imooc.css');
    @import url('@/common/imooc.css');
</style>

在 css 中引入本地（比如、字体）也可以使用相对路径和。

需要注意的是，有些端 css 不允许引用本地，这些平台、QQ、字节跳动、App v2。

（1）
实例：

<style>
    /* 引入 */
    .imooc-banner {
        background-image: url(/static/.png);
        background-image: url(@/static/.png);
    }
</style>

字体的引用路径推荐使用以 ~@ 开头的。如果字体小于 40kb， 会将其转化为 base64 格式，如果字体大于等于 40kb， 需要自己转换为 base64 格式，否则将不会生效。

<style>
    /* 引入字体 */
    .font { 
        font-family: test-icon; 
        src: url('~@/static/iconfont.ttf');
    }
</style>

需要注意以下几点：

（2）相对路径
实例：

background-image: url(../../static/.png);

项目开发过程中，除了自身的之外，对于外部资源的引用也是不可或缺的，所以需要熟练掌握在各种情况下，引入外部资源的方式。

本节课程我们主要学习了 的资源路径。本节课程的重点如下：

了解并掌握在模板内引入静态资源；

了解并掌握 js的引入，以及 js 的；

了解并掌握 css 的引入，了解 css 中各类本地的引入。