将 js 文件添加到 nuxt 配置

Question

有人设计了我的网页前端，现在我正尝试在 nuxtjs 中为我的所有页面全局使用所有 .css 和 .js 文件。但是我没有正确包含这些文件。

这是我要包含的文件之一：jquery.themepunch.tools.min.js。我收到此错误：

{ statusCode: 404, path: '/~/assets/revolution/js/jquery.themepunch.tools.min.js', message: 'This page could not be found' }

我将文件的路径添加到我的 nuxt.js.config 中，但我不知道我在这里遗漏了什么。这是我的配置文件：

const webpack = require('webpack')

module.exports = {
  head: {
    title: 'test-webpage',

    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'test page' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [
      {src: '~/assets/revolution/js/jquery.themepunch.tools.min.js'}
    ]
  },

  build: {
    vendor: ['jquery', 'bootstrap'],
    plugins: [
      // set shortcuts as global for bootstrap
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  },
}

Answer 1

~ 是 webpack 构建的别名。 head用于加载外部脚本，脚本不会包含在捆绑的js中。

您可以将 jquery.themepunch.tools.min.js 移动到静态并将脚本更改为

{ src: '/urpathinsidestaticfolder/jquery.themepunch.tools.min.js' }

将 js 文件添加到 nuxt 配置

Adding js files to nuxt config

config

requirejs

webpack

vue.js

nuxt.js