我正在将 Nuxt.js 与 Vuetify 一起使用,我想仅为菜单使用外部 Javascript 库,但似乎 2 不想共存,因为我没有看到来自外部 Javascript 库的任何事件被分配给一个 HTML 元素。
想让 Vuetify 与外部书店共存的想法是否可行?
我是否忘记了 Webpack 配置中的某些内容?你能帮助我吗?
这是我的nuxt.config.js
import colors from 'vuetify/es5/util/colors'
const webpack = require("webpack")
export default {
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
mode: 'universal',
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
*/
target: 'server',
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
head: {
titleTemplate: '%s - ' + process.env.npm_package_name,
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 || '' }
],
script: [
{ src: 'https://botifulthemes.net/js/jquery/jquery.js' },
{ src: 'https://botifulthemes.net/js/vendor.min.js', body: true },
{ src: 'https://botifulthemes.net/js/underscore.min.js', body: true },
{ src: 'https://botifulthemes.net/js/app.min.js', body: true }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Global CSS
*/
css: [
],
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [
// { src: '~plugins/vendor-app.js' },
// { src: '~plugins/underscore-app.js' },
// { src: '~plugins/main-app.js' },
],
/*
** Auto import components
** See https://nuxtjs.org/api/configuration-components
*/
components: true,
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/eslint-module',
'@nuxtjs/vuetify'
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios'
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {},
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
options: {
customProperties: true
},
dark: false,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
},
light: {
background: '#001429',
primary: '#f4511e',
secondary: '#001429'
}
}
}
},
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
// vendor: [ 'jquery' ],
// plugins: [
// new webpack.ProvidePlugin({
// $: 'jquery',
// jQuery: 'jquery',
// 'window.jQuery': 'jquery'
// })
// ],
/*
** Vous pouvez étendre la configuration webpack ici
*/
extend(config, ctx) {
// Exécuter ESLint lors de la sauvegarde
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/,
options: {
fix: true
}
})
// config.module.rules.push({
// test: /\.(js|jsx)$/i,
// loader: 'file-loader',
// options: {
// name: '[path][name].[ext]'
// }
// })
}
}
}
}
下面这部分是不活动的:
script: [
{ src: 'https://botifulthemes.net/js/jquery/jquery.js' },
{ src: 'https://botifulthemes.net/js/vendor.min.js', body: true },
{ src: 'https://botifulthemes.net/js/underscore.min.js', body: true },
{ src: 'https://botifulthemes.net/js/app.min.js', body: true }
],