运行npm run start
(&M);npm run dev
在我的代码中产生了不同的结果.我打算在生产环境中运行代码,使其像在开发环境中一样工作,但是当我分别运行它们时,并没有按照预期进行渲染.
Code Reference:
下拉部分
<v-list-group>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>About Us</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-for="(item, index) in navItems[2].content"
:key="index"
:to="item.link"
>
<v-list-item-title v-text="item.name"></v-list-item-title>
</v-list-item>
</v-list-group>
navItems: [
{name: '', link: '', content: [{name: '', link: ''}]},{}{
{name: '', link: '', content: [{name: '', link: ''}]},
name: "aboutus",
link: "",
content: [
{ name: "Vision", link: "/about/vision" },
{ name: "Partner With Us", link: "/about/partnership" },
],
}]
图像卡部分
<v-card
nuxt
id="btn-home-forest"
to="/industry/forestry"
class="mx-0 bgMidPurple borderSharpTopBtmRound pb-3"
max-width="276"
>
<v-img
:src="require('~/assets/images/forestry_button.png')"
height="208px"
></v-img>
<v-card-title
class="textWhite textBody"
>
Forestry
</v-card-title>
</v-card>
Nuxt Config JS
import colors from 'vuetify/es5/util/colors'
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
generate: {
exclude: ['/blog', '/pricing'],
fallback: '404.html'
},
target: 'static',
server: {
host: '0.0.0.0',
port: 8888
},
head: {
titleTemplate: '%s',
title: 'nuxt-vuetify-basic',
htmlAttrs: {
lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/EoF-Logo.png' }
],
},
env:{
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'@assets/global.css'
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'@plugins/vue-recaptcha-v3.js',
'@/plugins/vuelidate',
'@/plugins/vue-country-code'
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
'@nuxtjs/vuetify',
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'@nuxtjs/axios', 'cookie-universal-nuxt'
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
baseURL: '/',
},
router:{
//middleware: ['']
},
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
vuetify: {
treeShake: false,
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,
},
},
},
},
build: {
publicPath: '/public',
filenames: {
chunk: 'js/[id].[contenthash].js'
},
extractCSS: true,
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css|vue)$/,
chunks: 'all',
enforce: true
}
}
}
},
transpile: [
'vuetify/lib',
],
},
}
Production Config
Production Dropdown
Production Image Card
Development Config
Development Dropdown
Development Image Card
Development Console Error Code
为什么与dev相比,生产环境中的组件都在运行相同的代码,却出现了中断?
我已经参考了下面的链接来解决我所面临的问题,这可能是最接近我所面临的问题,但它也不起作用.
Nuxt production mode loading resources late?
Why is my Vue JS Nuxt lazy loaded component bundled in app.js, not loaded separately?