Vuecli3 introduces iView

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

module.exports = {
  publicPath: '/',
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
};

Copy the code

2. Introduced into SCSS files.ttcFont error

@font-face { font-family: 'Avenir Next'; SRC: url (". / AvenirNext. TTC '), a url ('. / AvenirNextRegular. Otf '); font-weight: normal; font-style: normal; }Copy the code

.ttc

@font-face {
  font-family: 'Avenir Next';
  src: url-loader('./AvenirNext.ttc', the url ('./AvenirNextRegular.otf');
  font-weight: normal;
  font-style: normal;
}

Copy the code

3. Several ways for VUE to introduce external resources

3-1. Import the image in 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>Copy the code

3-2. SCSS and image resources are introduced into 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>Copy the code