Question

我是vue和Nuxt的新手，我有一个任务来部署带有youtube api和搜索功能的静态页面因此，每次我尝试使用nuxt生成静态页面时，它都没有我的图片或youtube API

index.vue

    <template>

    <div class="iframe">

          <input class="textR" type="text" v-model="searchInput">
          <button class="button" style="vertical-align:middle" @click="search(searchInput)" ><span>  Search</span></button>

      <div v-if="videos!=null" id="iframeContainer" style="display: inline-table;">
                <iframe class="overall" v-for="item in videos" :key="item.id.videoId" width="640" height="480" 
        :src="'https://www.youtube.com/embed/'+item.id.videoId" 
        frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen></iframe>
      </div>

  </div>

  </template>

<script>

  export default {
    created() {
      let axios = require('axios');

        let params = {
        part: 'snippet',
        key: 'myApiCode',
        q: 'كايروكى',
        maxResults: 5,
        type: 'video'
                    };
    var parent = this;
     axios.get('https://www.googleapis.com/youtube/v3/search', { params })
    .then(response => {
    parent.videos = response.data.items }
    )
    .catch(error => console.error(error));
    },   
    mounted(){
      setTimeout(function(){     let count = document.getElementById("iframeContainer").children;
        if (count.length%2 != 0) {count[count.length -1].style.cssText = "margin: auto; display: table-cell;"};
},1000)
    },
    data() {
      return {
        videos: null,
        loading: true,
        searchInput: ""
      }
    },
    methods: {
      search(keyword){

             let axios = require('axios');

        let params = {
        part: 'snippet',
        key: 'AIzaSyBqJ9T8tven3Ge0_hNDWKjJ3lqOoL5N90s',
        q: keyword,
        maxResults: 5,
        type: 'video'
                    };
    var parent = this;
     axios.get('https://www.googleapis.com/youtube/v3/search', { params })
    .then(response => {
    parent.videos = response.data.items }
    )
    .catch(error => console.error(error));
      },
    }
  }

</script>
<style>

body {background-color: black;}
input[type=text] {
  background-color: white;
  background-image: url('../components/searchicon.png');
    background-position: -1px 0px;
    background-repeat: no-repeat;
    padding-left: 30px;
    background-size: 14%;
    color : rgb(0, 0, 0);
}
.overall{
    padding: 23px 20px;
    background-color: #272727;
    margin: 40px 50px;
    border: 1px red solid;
}
.iframe {
    padding: 23px 20px;
    margin: 40px 100px;
}
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}
.textR{
      padding: 5px 5px;
    margin: 20px 50px;

}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>

nuxt.config.js

    import colors from 'vuetify/es5/util/colors'
// const routerBase = process.env.DEPLOY_ENV === 'master' ? {
//   router: {
//     base: '/youtube-task/'
//   }
// } : {}
export default {
  // ...routerBase,
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    titleTemplate: '%s - ' + process.env.npm_package_name,
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  // router: {
  //   base: '/youtube-task/'
  // },
  /*
  ** Customize the progress-bar color
  */  
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    '@nuxtjs/vuetify',
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}

package.json

    {
  "name": "youtube-task",
  "version": "1.0.0",
  "description": "My flawless Nuxt.js project",
  "author": "MostafaDesoky",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "build:gh-pages": "cross-env DEPLOY_ENV=master nuxt build",
    "generate:gh-pages": "cross-env DEPLOY_ENV=master nuxt generate",
    "deploy": "push-dir --dir=dist --branch=master --cleanup"
  },
  "dependencies": {
    "nuxt": "^2.0.0",
    "@nuxtjs/axios": "^5.3.6"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.0.0",
    "cross-env": "^7.0.2",
    "push-dir": "^0.4.1"
  }
}

Anyhelp会很棒，我尝试了很多方法，但是什么也没有我试图让netlify为我生成dist，但没有pic或youtube api都是一样的

编辑＃1：当我在本地主机上运行它时，它可以通过npm run dev完美运行，我尝试生成dist文件夹并将其上传到任何地方时出现的问题

Answer 1

您是否尝试过在生成静态网站之前启用spa模式？

mode: 'spa',

为什么不直接使用axios帮助程序而不是使用它呢？

this.$axios.get('https://www.googleapis.com/youtube/v3/search', { params })

对于背景图像，您必须使用以下语法：

background-image: url('~folder/nameoffile.ext');

生成Nuxt静态页面时没有图片或API

1 个答案: