1、vuecli3引入iView,出现一下错误
Inline JavaScript is not enabled. Is it set in your options?
module.exports = {
publicPath: '/',
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
},
},
},
};
2、scss文件中引入.ttc
字体报错
@font-face {
font-family: 'Avenir Next';
src: url('./AvenirNext.ttc') ,url('./AvenirNextRegular.otf');
font-weight: normal;
font-style: normal;
}
解决:.ttc
文件使用url-loader引入即可
@font-face {
font-family: 'Avenir Next';
src: url-loader('./AvenirNext.ttc') ,url('./AvenirNextRegular.otf');
font-weight: normal;
font-style: normal;
}
3、vue引入外部资源的几种方式
3-1、template中引入图片
<template>
<div class="home">
<img alt="Vue logo" src="@/assets/logo.png" />
<img alt="Vue logo" :src="require('@/assets/logo.png')" />
<img alt="Vue logo" :src="require(`@/assets/${logo}.png`)" />
<img alt="Vue logo" :src="logoSrc" />
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
logo: "logo",
logoSrc: require("@/assets/logo.png")
};
}
};
</script>
3-2、scss中引入scss及图片资源
<style lang="scss" scoped>
@import '~@/scss/mixin.scss';
.main-content {
width: 400px;
background-image: url('~@/assets/img/bgImg.png');
// ....
@include phone {
width: 200px;
}
}
</style>