nuxtjs 3 添加外部 javascript

Question

我尝试将外部 javascript 文件添加到nuxt.config.ts。但 nuxt 没有加载该文件。

nuxt.config.ts文件：

export default defineNuxtConfig({

    css: [
        'bootstrap/dist/css/bootstrap.min.css'
    ],
    script: [
        {
            src: 'script.js',
        }
    ],
    vite: {
        define: {
            'process.env.DEBUG': false,
        },
    }
})

Answer 1

在 Nuxt 3 中加载脚本的正确方法是使用(在此处查看官方文档中的更多内容)head中的对象app

对于你的情况，这应该有效。

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'stylesheet', href: 'bootstrap/dist/css/bootstrap.min.css' },
      ],
      script: [{ src: 'script.js' }],
    },
  },

  vite: {
    define: { 'process.env.DEBUG': false },
  },
});

head包含meta、script、link和标签，因此如果您想编写其中任何一个，您将使用相同的style方法no-script

Answer 2

我尝试了很多方法，这是唯一有效的方法。

export default defineNuxtConfig({
css: [
    '@/css/bootstrap.rtl.min.css'
],
app: {
    head: {
        script: [
            {
                src: '_nuxt/js/bootstrap.bundle.min.js',
            }
        ],
    }
}
})