常见问题

💡 查看 issues 以了解已知问题和解决方法

找不到处理 '.vue' 文件的加载器

虽然我们添加了解决方法来缓解此问题，但 vite 建议为非 javascript 资产显式定义扩展名。

- import MyComponent from '~/components/MyComponent'
+ import MyComponent from '~/components/MyComponent.vue'

Uncaught SyntaxError: 请求的模块...没有提供名为 'default' 的导出

Vite 在使用命名导出预捆绑依赖项方面存在问题 (#56 )。解决方法是将它们从 optimizeDeps 中排除

// nuxt.config
export default {
  vite: {
    optimizeDeps: {
      exclude: [
        'date-fns'
      ]
    }
  }
}

默认情况下，一些已知软件包被排除在外。请回复 issue #56 以添加更多已知问题软件包。

没有此文件或目录，rmdir node_modules/.vite/temp

这是一个竞争条件，服务器缓存目录在重新加载时会删除 (vitejs/vite/pull/2299 )

目前使用 vite 的一个分支来解决此问题。如果您仍然遇到此问题，请在 #2 中添加版本和错误

styleResources

styleResources 依赖于 webpack，但 nuxt-vite 不支持它。

您可以使用 CSS 加载器的 preprocessorOptions 选项配置全局 CSS 导入

SCSS 示例

export default {
  css: ["@/assets/scss/global.scss"],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/scss/global.scss";',
        },
      },
    },
  },
}

Graphql 支持

目前没有模块支持处理 gql 文件 (#31 )。

目前最好的解决方案是将 gql 代码包装在 js 或 ts 中，并使用 graphql-tag 或使用原始 GraphQL 查询。请记住添加 loc.source.body。

示例

// queries/products.js
import gql from 'graphql-tag'
export default gql`
  query Products {
    products {
      id
      name
    }
  }
`

// pages/index.vue
import products  from '~/queries/products'
export default {
    async asyncData({ $strapi }) {
        const response = await $strapi.graphql({
            query: products.loc.source.body,
        })
        return {
            response
        }
    }
}

SSR 资产问题

与 #7 相关，从您的模板导入资产时可能会发生错误。

中断导入的示例

<img src="../static/img/logo.svg">

在解决此问题之前，您需要在开发中禁用 SSR，并使用项目根文件夹的完整路径引用您的图像。

导入工作的示例

// nuxt.config.js

export default {
  ssr: false
}

<img src="~/static/img/logo.svg" />

在 GitHub 上编辑此页面更新于 2021 年 10 月 11 日星期一

高级如何