Hi there!
I just experiencing an issue that global components
that defined in plugins/
directory doesn't seems to work on production build.
left : build & run on production mode right : run development server
I've assure that this issue only happened on client side rendering because i've check the server side rendering seems to work just fine.
The global component <app-main />
is registered on /plugins/global-components.js
file here
and here my nuxt.config.js
file
'use strict'
const { resolve } = require('path')
const Env = use('Env')
module.exports = {
build: {
publicPath: Env.get('CDN_URL', '/'),
analyze: {
analyzerMode: 'static',
generateStatsFile: true,
statsFilename: 'webpack-stats.json'
},
extractCSS: true,
postcss: {
plugins: {
'postcss-custom-properties': false
}
}
},
css: [
'~assets/scss/main.scss'
],
head: {
htmlAttrs: {},
meta: [
{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width,initial-scale=1'
},
{
'http-equiv': 'x-ua-compatible',
content: 'ie=edge,chrome=1'
},
{
name: 'theme-color',
content: '#ffffff'
}
],
link: [
{
rel: 'shortcut icon',
type: 'image/x-icon',
href: '/favicon.ico'
},
{
rel: 'apple-touch-icon',
size: '192x192',
href: '/mobile-icon.png'
},
{
rel: 'icon',
type: 'image/png',
size: '192x192',
href: '/mobile-icon.png'
},
{
rel: 'icon',
type: 'image/png',
size: '32x32',
href: '/favicon.png'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Montserrat:300,400,600'
}
],
noscript: [{
innerHtml: `
<h1>Javascript Disabled</h1>
<p>It appears that you do not have Javascript enabled. This application relies on Javascript for most of our features.<p>
<p>Please enable Javascript and <a href=".">reload</a> in order to use this site.</p>
`}]
},
loading: {
color: '#589d8d'
},
plugins: [
'~/plugins/global-components.js'
],
router: {
base: '/',
linkActiveClass: '',
linkExactActiveClass: 'is-active',
scrollBehaviour: () => ({
x: 0,
y: 0
}),
extendRoutes: (routes) => {
routes.forEach((route) => {
route.meta = {
title: route.name
}
})
}
},
buildDir: resolve(__dirname, '..', 'public'),
srcDir: resolve(__dirname, '..', 'resources')
}
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2492">#c2492</a>)</em></sub></div>