vue3知识点5.3 vuecli4.5项目静态资源（引入图片、js,css，jquery，bootstrap)

#vue3知识点5.3 vuecli4.5项目静态资源

一、引入静态资源的方式：

1.静态资源放置目录

vue-cli4.5有两个放置静态资源的目录分别是public和src/assets。

1.public

public放不会变动的文件（相当于vue-cli2.x中的static）,存放外部js,css资源，也可以放图片。

public/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这个取决于你vue.config.js中publicPath的配置，默认的是/。

public目录下的静态资源打包的时候不会被webpack解析，可以直接引用,即不用写require(img.jpg)。所以最好把静态资源都放进public下。不能放置带有es6的js文件。

1.
<img src="/public/img/a.jpg">
2.
<img :src="imga">
data(){
	imga:'/public/img/a.jpg'
}

2.assets

assets放可能会变动的文件,存放组件img,bg-image引用的图片等静态资源。。

assets目录中的文件会被webpack处理解析为模块依赖，比如<img src="...">,background:url(),webpack会把url(./img.png)翻译为require(’./img.png’).

存放在assets的图片必须先import导入，再用。

只支持相对路径形式。

2.1Webpack打包工具

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

---

在vue项目引用静态资源时，webpack主要用require进行解析。在项目进入index.js后，加载的组件中的require都属于webpack的解析范畴。

2.2require用法：

只对于放在assets文件夹下的目录：

错误用法1：不能将目录赋给一个变量，然后require这个变量。

// 代码1 报错
let url = "@/assets/images/carousel/logo.svg"
require(url)    // require单纯传了一个变量不可取，电脑会把所有的资源扫描一遍找到这个。

正确做法：应该用变量指定这个资源名字，然后用require拼接目录加上这个变量。

// 代码2 正确
let url = "logo.svg"
require("@/assets/images/carousel/"+url); // require里面虽然是变量但是增加了前缀，让计算机更快找到

错误用法2：

img不会识别这种动态绑定：会报错。

<img :src="'../../public/img'+item.url" />

src绑定的会解析成一个纯字符串，只能通过在js里require（）先包一下，拼接好再显示。

3.public和assets对照<