前端-VUE-资源引用-记录V1.1

1.问题：
　　background-image: url(./bg02.jpg);
　　开发环境可用，正式环境找不到图片
解决方法:
　　（vue-cli2)修改build/utils，添加return ExtractTextPlugin的 publicPath: '../../'
　　（vue-cli3)修改config/index.js，将其中的assetsPublicPath值改为’./’
原因:
　　webpack打包时资源路径换了
　　
2.问题：
　　let url = "@/assets/images/carousel/logo.svg"
　　require(url)//报错
解决方法:
　　require("@/assets/images/carousel/"+url); //正确
原因:
　　如果require中传入的是个变量，它有可能是计算机系统中的任何目录下的任何文件，那么在打包静态资源时它有可能会将你的电脑整个磁盘遍历一遍

webpack解析资源规则
　　会被 webpack 作require('./image.png')处理
　　　　相对路径(以 . 和 @ 开头,非/开头都是相对路径)。诸如 src="..."、background: url(...) 和 CSS @import 的资源
　　不会处理
　　　　public 目录下或通过绝对路径被引用(/)
　　注：处理v-bind标记的路径
　　　　:src="'./assets/images/02.jpg'" 不会处理
　　　　:src="require('./assets/images/03.jpg')"
引入静态态资源（static文件夹）
　　.vue中的任何地方都只要使用../这种相对路径的方式引入
引入动态资源(需要打包的/src/assets中的资源)　　
vue-loader加载资源规则，所有静态资源打包后存在static目录
template部分，(vue-loader,没必要手动调用require)
1.绝对路径　　src="/src/assets/image/login/title.png"
渲染后　　　　src="/src/assets/image/login/title.png"
2.以 . 开头　　src="./titlea.png"
渲染后　　　　src="/static/img/titlea.1e9fa570.png"
3.以 @ 开头　　src="@/assets/image/login/title.png"
渲染后　　　　src="/static/img/title.1e9fa570.png"
　　　　　　@认配置了将 @ 指向 /src
4.以 ~ 开头　　src="~[npm包名]/xxx/logo.png"
渲染后　　　　src="/static/img/logo.2f53e458.png"

style部分的路径处理
css-loader的配置：url为true时，则意味着可以将url中的字符串通过require()
1.绝对路径　　background-image: url("/src/assets/image/login/title.png");
渲染后　　　　background-image: url("/src/assets/image/login/title.png");
2.以 . 开头　　background-image: url("./titlea.png");
渲染后　　　　background-image: url(/static/img/titlea.1e9fa570.png);
3.以 @ 开头　　不支持路径
4.以 ~ 开头　　@import url('~@/assets/css/childcpm.css');
　　　　　　background-image: url("~[npm包名]/logo.png");
　　　　　　background-image: url("~@/assets/image/login/bg.png");
渲染后　　　　background-image: url(/static/img/logo.e05643fc.png);
　　　　　　background-image: url(/static/img/bg.1d997ea3.png);
script部分的路径处理必须用@import的方式引入
1.直接将图片引入为模块
　　require imgUrl from "../assets/test.png"
　　import imgUrl from "../assets/test.png"
2.将imgUrl放在数据里
　　data(){return {imgUrl:require("../assets/test.png")}}
3.在生命周期函数中设置
　　created(){
　　　　let urlTemp = "assets/test.png";
　　　　this.imgUrl = require("@/"+urlTemp)
　　}