javascript - NUXT: Could not compile template - Stack Overflow

admin管理员组

文章数量:1416642

I'm getting started with nuxt. My project structure in the screenshot, I've got a vuetify carousel ponent that was working fine with urls as the src. Now I want to try to serve local static files. I tried:

    <template>
  <v-carousel>
    <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
  </v-carousel>
</template>


    <script>

export default {
  data () {
    return {
      items: [
        {
          src: '/static/52lv.PNG'
        },
        {
          src: '.jpg'
        },
        {
          src: '.jpg'
        },
        {
          src: '.jpg'
        }
      ]
    }
  }
}
</script>

but now when I run the dev server I get:

$ npm run dev

> [email protected] dev ....\js\nuxt4
> nuxt

i Preparing project for development                                                                                                                   20:23:25
i Initial build may take a while                                                                                                                      20:23:25
√ Builder initialized                                                                                                                                 20:23:25

ERROR  Could not pile template ....nuxt4\\node_modules\\@nuxt\\vue-app\\template\\App.js: Cannot resolve "~/assets/style/app.styl" from "E:\ENVS\js\nuxt4\assets\style\app.styl"

at Promise.all.templatesFiles.map (node_modules\@nuxt\builder\dist\builder.js:6009:17)

What am I doing wrong?

I'm getting started with nuxt. My project structure in the screenshot, I've got a vuetify carousel ponent that was working fine with urls as the src. Now I want to try to serve local static files. I tried:

    <template>
  <v-carousel>
    <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
  </v-carousel>
</template>


    <script>

export default {
  data () {
    return {
      items: [
        {
          src: '/static/52lv.PNG'
        },
        {
          src: 'https://cdn.vuetifyjs./images/carousel/sky.jpg'
        },
        {
          src: 'https://cdn.vuetifyjs./images/carousel/bird.jpg'
        },
        {
          src: 'https://cdn.vuetifyjs./images/carousel/planet.jpg'
        }
      ]
    }
  }
}
</script>

but now when I run the dev server I get:

$ npm run dev

> [email protected] dev ....\js\nuxt4
> nuxt

i Preparing project for development                                                                                                                   20:23:25
i Initial build may take a while                                                                                                                      20:23:25
√ Builder initialized                                                                                                                                 20:23:25

ERROR  Could not pile template ....nuxt4\\node_modules\\@nuxt\\vue-app\\template\\App.js: Cannot resolve "~/assets/style/app.styl" from "E:\ENVS\js\nuxt4\assets\style\app.styl"

at Promise.all.templatesFiles.map (node_modules\@nuxt\builder\dist\builder.js:6009:17)

What am I doing wrong?

• javascript
• vue.js
• nuxt.js

Share Improve this question Follow asked Jan 3, 2019 at 1:42 user1592380user1592380 36.6k105105 gold badges314314 silver badges553553 bronze badges 2

• 3 Your app.styl file appears to have been moved from assets/style to static/style. Was this intentional? – Phil Commented Jan 3, 2019 at 1:49
• yes - I'm trying to figure out how to serve local files, I was following nuxtjs/guide/assets . I couldn't figure out the path from the assets folder so i renamed the folder as static to try from there. That's when the error happened. – user1592380 Commented Jan 3, 2019 at 14:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I had the exact issue, it turned out to be a path issue in my nuxt.config.js file under css and scripts sections. I added a assets folder with sub folders and files within them such as static > assets > etc but in my config file it was ~/assets.

I changed it to ~/static/assets/ and now it piles correctly.

Hope this helps.

I'm starting out with Nuxt.js too! So far, at least for my navbar where I have the static pages linked to, I have my static files routed in the nuxt.config.js file under generate : { routes: ["file/", "file2/"] }. Each those files are .vue files under my pages directory. Now, when I run npm run dev, I can click into each of those files on my navbar and they e up perfectly. Hope this helps! Comment below if I'm unclear.

本文标签： javascriptNUXT Could not compile templateStack Overflow