我已经按照Nuxt文档中所述选择“ Vuetify”作为选项之一,使用“ npx create-nuxt-app”命令创建了Nuxt应用程序。这将创建一个默认的Nuxt应用程序,该应用程序可以在Webpack开发模式下与Vuetify完美运行。但是,当我添加
buildDir: './../functions/nuxt'
配置为Nuxt并运行'yarn dev',只要Vue到达Vuetify且页面变为空白,Vuetify就会损坏,页面的渲染也会停止。
这些是浏览器给出的主要错误
这是nuxt.config.js
import colors from 'vuetify/es5/util/colors'
export default {
mode: 'universal',
head: {
title: 'Frame of Nuxt2 application on Firebase',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
]
},
loading: { color: '#fff' },
css: [
],
plugins: [
],
buildModules: [
'@nuxtjs/eslint-module',
'@nuxtjs/vuetify'
],
modules: [
'@nuxtjs/axios',
'@nuxtjs/pwa'
],
axios: {
},
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: true,
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
}
}
}
},
buildDir: './../functions/nuxt',
build: {
extend (config, ctx) {
}
}
}
似乎我不了解Vuetify如何与Nuxt一起使用,并且无法想到为什么无法以默认方式构建应用程序(默认情况下,它将其构建在.nuxt
文件夹中的项目中)破坏了它的可能原因。 / p>
真的很感谢您的见识
答案 0 :(得分:0)
好吧,看来构建目标的根文件夹必须在node_modules中具有vuetify。添加依赖项可以解决此问题。就我的“功能”目录而言。
buildDir: './../functions/nuxt'