0

Estou construindo uma nova aplicação ssr usando Nuxt 2 e Firebase, estou tentando fazer deploy da minha aplicação usando o Firebase Hosting e Cloud Functions assim como nesse video porém o problema, o video é feito usando Nuxt 1 e ao fazer deploy com Nuxt 2 na pasta dist são geradas 2 pastas /client e /server e por conta disso após o deploy o erro Uncaught SyntaxError: Unexpected token <Uncaught SyntaxError Se eu copiar todo o conteúdo da pasta /dist/client e colar dentro dentro da pagina /public o erro para de aparecer porém o css para de funcionar.Sem CSS Meu nuxt.config esta assim:

{
  mode: 'universal',

  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    '~/assets/style/app.styl'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/vuetify'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios'
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  buildDir: './functions/nuxt',
  build: {

    publicPath: '/',
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {

    }
  }
}

Meu functions/index.js está assim:

const functions = require('firebase-functions')
const express = require('express')
const { Nuxt } = require('nuxt')

const app = express()

const config = {
  dev: false,
  buildDir: './nuxt',
  build: {
    publicPath: '/'
  }
}

const nuxt = new Nuxt(config)

function handleRequest(req, res) {
  res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
  nuxt.renderRoute('/').then(result => {
    res.send(result.html)
  }).catch(e => {
    res.send(e)
  })
}

app.get('*', handleRequest)
exports.nuxtApp = functions.https.onRequest(app)

1 Resposta 1

0

Como no vídeo, você deve servir seu conteúdo estático de acordo com a configuração de public path, que é a raiz.

Copie o conteúdo de client e server para a pasta public, que ficará acessível na raiz da sua aplicação:

cp -R functions/nuxt/dist/client/* public
cp -R functions/nuxt/dist/server/* public

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .