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',
            }
        ],
    }
}
})