Question

我正在开始使用nuxt。屏幕截图中的项目结构中，我有一个vuetify轮播组件，该组件可以将url作为src正常工作。现在，我想尝试提供本地静态文件。我尝试过：

    <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.com/images/carousel/sky.jpg'
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
        }
      ]
    }
  }
}
</script>

但是现在当我运行开发服务器时，我得到了：

$ npm run dev

> nuxt4@1.0.0 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 compile 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)

我在做什么错了？

Answer 1

我也从Nuxt.js开始！到目前为止，至少对于链接了静态页面的导航栏，我的静态文件已路由到nuxt.config.js下的generate : { routes: ["file/", "file2/"] }文件中。这些文件都是我的pages目录下的.vue文件。现在，当我运行npm run dev时，可以单击导航栏上的每个文件，它们会完美显示。希望这可以帮助！如果不清楚，请在下面发表评论。

Answer 2

我遇到了确切的问题，事实证明这是我的nuxt.config.js文件中css和脚本部分下的路径问题。我添加了一个资产文件夹，其中包含子文件夹和其中的文件，例如static> asset> etc，但是在我的配置文件中它是〜/ assets。

我将其更改为〜/ static / assets /，现在可以正确编译。

希望这会有所帮助。

NUXT：无法编译模板

2 个答案: