[英]JS files not being loaded in Nuxt project
我正在使用引导程序模板,并尝试将其实施到 Nuxt 项目中。 我相信我已经加载了除脚本之外的所有必要文件。
我正在将我的脚本导入nuxt.config.js
。 我尝试过几种不同的方法:
1.) 我试过包括这样的本地 src 路径:
script: [
{ src: '~assets/js/jquery.js' },
{ src: '~assets/js/popper.min.js' },
{ src: '~assets/js/bootstrap.min.js' },
{ src: '~assets/js/jquery.cubeportfolio.min.js' },
{ src: '~assets/js/parallax.min.js' },
{ src: '~assets/js/jquery.appear.min.js' },
{ src: '~assets/js/jquery.themepunch.tools.min.js' },
{ src: '~assets/js/jquery.themepunch.revolution.min.js' },
{ src: '~assets/js/extensions/revolution.extension.actions.min.js' },
{ src: '~assets/js/extensions/revolution.extension.carousel.min.js' },
{ src: '~assets/js/extensions/revolution.extension.kenburn.min.js' },
{ src: '~assets/js/extensions/revolution.extension.layeranimation.min.js' },
{ src: '~assets/js/extensions/revolution.extension.migration.min.js' },
{ src: '~assets/js/extensions/revolution.extension.parallax.min.js' },
{ src: '~assets/js/extensions/revolution.extension.slideanims.min.js' },
{ src: '~assets/js/extensions/revolution.extension.video.min.js' },
{ src: '~assets/js/revolution-addons/before-after-affect/revolution.addon.beforeafter.min.js'}
],
2.) 作为静态文件:
script: [
{ src: '/js/jquery.js' },
{ src: '/js/popper.min.js' },
{ src: '/js/bootstrap.min.js' },
{ src: '/js/jquery.cubeportfolio.min.js' },
{ src: '/js/parallax.min.js' },
{ src: '/js/jquery.appear.min.js' },
{ src: '/js/jquery.themepunch.tools.min.js' },
{ src: '/js/jquery.themepunch.revolution.min.js' },
{ src: '/js/extensions/revolution.extension.actions.min.js' },
{ src: '/js/extensions/revolution.extension.carousel.min.js' },
{ src: '/js/extensions/revolution.extension.kenburn.min.js' },
{ src: '/js/extensions/revolution.extension.layeranimation.min.js' },
{ src: '/js/extensions/revolution.extension.migration.min.js' },
{ src: '/js/extensions/revolution.extension.parallax.min.js' },
{ src: '/js/extensions/revolution.extension.slideanims.min.js' },
{ src: '/js/extensions/revolution.extension.video.min.js' },
{ src: '/js/revolution-addons/before-after-affect/revolution.addon.beforeafter.min.js'}
],
我的整个nuxt.config.js
文件如下所示:
export default {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'~/assets/css/style.css',
'~/assets/css/animate.css',
'~/assets/css/bootstrap-reboot.min.css',
'~/assets/css/bootstrap.min.css',
'~/assets/css/cubeportfolio.min.css',
// '~/assets/css/fontawesome-all.min'
'~/assets/css/green.css',
'~/assets/css/jquery.fancybox.min.css',
'~/assets/css/layer.css',
'~/assets/css/morphext.css',
'~/assets/css/navigation.css',
'~/assets/css/settings.css',
'~/assets/css/swiper.min.css',
'~/assets/css/themify-icons.css',
'~/assets/css/yellow.css',
'~/assets/css/revolution-addons/before-after-affect/revolution.addon.beforeafter.css',
'~/assets/css/revolution-addons/particles-effect/revolution.addon.particles.css'
],
script: [
{ src: '~assets/js/jquery.js' },
{ src: '~assets/js/popper.min.js' },
{ src: '~assets/js/bootstrap.min.js' },
{ src: '~assets/js/jquery.cubeportfolio.min.js' },
{ src: '~assets/js/parallax.min.js' },
{ src: '~assets/js/jquery.appear.min.js' },
{ src: '~assets/js/jquery.themepunch.tools.min.js' },
{ src: '~assets/js/jquery.themepunch.revolution.min.js' },
{ src: '~assets/js/extensions/revolution.extension.actions.min.js' },
{ src: '~assets/js/extensions/revolution.extension.carousel.min.js' },
{ src: '~assets/js/extensions/revolution.extension.kenburn.min.js' },
{ src: '~assets/js/extensions/revolution.extension.layeranimation.min.js' },
{ src: '~assets/js/extensions/revolution.extension.migration.min.js' },
{ src: '~assets/js/extensions/revolution.extension.parallax.min.js' },
{ src: '~assets/js/extensions/revolution.extension.slideanims.min.js' },
{ src: '~assets/js/extensions/revolution.extension.video.min.js' },
{ src: '~assets/js/revolution-addons/before-after-affect/revolution.addon.beforeafter.min.js'}
],
/*
** Plugins to load before mounting the App
*/
plugins: [
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
],
/*
** Nuxt.js modules
*/
modules: [
],
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
}
}
}
检查页面时,我没有看到任何列出的脚本文件,这似乎阻止了此引导程序主题的其余部分正确加载。
它应该是这样的: http : //www.themesindustry.com/html/treely/index.html
我的整个 repo 可以在这里找到: https : //github.com/SIeep/brandon-evans-portfolio
非常感谢任何形式的指导或帮助!
谢谢 :)
我相信scripts
数组应该像这样在head
对象内:
export default {
...
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
script: [
{ src: '~assets/js/jquery.js' },
{ src: '~assets/js/popper.min.js' },
{ src: '~assets/js/bootstrap.min.js' },
{ src: '~assets/js/jquery.cubeportfolio.min.js' },
{ src: '~assets/js/parallax.min.js' },
{ src: '~assets/js/jquery.appear.min.js' },
{ src: '~assets/js/jquery.themepunch.tools.min.js' },
{ src: '~assets/js/jquery.themepunch.revolution.min.js' },
{ src: '~assets/js/extensions/revolution.extension.actions.min.js' },
{ src: '~assets/js/extensions/revolution.extension.carousel.min.js' },
{ src: '~assets/js/extensions/revolution.extension.kenburn.min.js' },
{ src: '~assets/js/extensions/revolution.extension.layeranimation.min.js' },
{ src: '~assets/js/extensions/revolution.extension.migration.min.js' },
{ src: '~assets/js/extensions/revolution.extension.parallax.min.js' },
{ src: '~assets/js/extensions/revolution.extension.slideanims.min.js' },
{ src: '~assets/js/extensions/revolution.extension.video.min.js' },
{ src: '~assets/js/revolution-addons/before-after-affect/revolution.addon.beforeafter.min.js'}
],
...
}
您应该使用import
语句和 webpack 而不是导入所有这些 js 文件。 这不是一个好习惯。
另外,我不确定 nuxt 是否存在属性script
。 但是,如果你真的想这样做,你可以在你的head
内容中导入你的文件,就像这个例子:
export default {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
{ rel: 'stylesheet', href: '/assets/css/jquery.fancybox.min.css' }
],
script: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'}
]
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.