How to add external js file in Nuxt?

在Nuxt.js中，添加外部JavaScript文件有几种不同的方法，这取决于具体需求和外部脚本的使用场景。以下是几种常见的方法：

1. 使用 nuxt.config.js 文件

对于需要在全局范围内使用的外部脚本，可以通过修改 nuxt.config.js 文件中的 head 属性来引入。这样可以保证这些脚本在应用的所有页面中都可用。例如，如果要添加一个外部的jQuery库，可以这样做：

javascript
export default {
  head: {
    script: [
      { src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' }
    ],
    // 其他 head 配置...
  },
  // 其他 Nuxt 配置...
}

2. 在页面组件中动态加载

如果你只需要在特定的页面或组件中加载外部JS文件，可以在那个组件的生命周期钩子中动态添加。可以使用 mounted 钩子来确保DOM已经完全加载，例如：

javascript
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = "https://cdn.jsdelivr.net/npm/your-script.js";
    script.async = true;
    document.head.appendChild(script);
  }
}

3. 使用插件

在Nuxt.js中，你还可以通过创建插件来引入外部JavaScript文件。这对于需要在Vue实例化之前加载的脚本特别有用。例如，可以创建一个插件来加载和初始化外部的SDK：

javascript
// plugins/your-plugin.js
export default ({ app }, inject) => {
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/your-sdk.js';
  script.onload = () => {
    // 初始化SDK
    const sdk = new YourSDK();
    inject('sdk', sdk);
  }
  document.head.appendChild(script);
}

// nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/your-plugin.js', mode: 'client' }
  ],
  // 其他 Nuxt 配置...
}

使用场景示例

假设我们正在开发一个电子商务网站，需要在特定的商品展示页面中使用一个外部的360度图片查看器库。为了优化加载时间和性能，我们可能会选择在该页面的组件中动态加载这个库，而不是全局加载。这样，只有当用户访问到这个页面时，才会加载和初始化这个库。

这些方法各有优势，选择哪一种取决于你的具体需求和项目的结构。在实际工作中，理解并选择最适合项目场景的方法是非常重要的。