vue cli3 开发踩坑记录

462 阅读1分钟

1、vuecli3引入iView,出现一下错误

Inline JavaScript is not enabled. Is it set in your options?

1
解决:添加vue.config.js文件,并设置:

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;
}

3
解决:.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>