使用babel-node和babel 7构建nuxtjs

时间:2018-06-21 15:49:00

标签: javascript express babel nuxt.js

我正在用Express开发一个nuxtjs项目, 在后端,我使用了所有es6功能,并使用babel-node和babel 7进行渲染。

在开发环境或测试环境(ava)上,我设法使用babel 7和babel节点运行项目

但是当我出于某种原因试图以生产模式(nuxt构建)构建和运行服务器时,我的所有后端URL路由都返回404并出现以下错误

Error: Request failed with status code 404
    at createError (/Users/elonsalfati/devel/misc/astralink/painter/node_modules/axios/lib/core/createError.js:16:15)
    at settle (/Users/elonsalfati/devel/misc/astralink/painter/node_modules/axios/lib/core/settle.js:18:12)
    at Unzip.handleStreamEnd (/Users/elonsalfati/devel/misc/astralink/painter/node_modules/axios/lib/adapters/http.js:201:11)
    at Unzip.emit (events.js:187:15)
    at endReadableNT (_stream_readable.js:1081:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)

  statusCode: 500,
  name: 'NuxtServerError'

/*
  - createError.js:16 createError
    [painter]/[axios]/lib/core/createError.js:16:15

  - settle.js:18 settle
    [painter]/[axios]/lib/core/settle.js:18:12

  - http.js:201 Unzip.handleStreamEnd
    [painter]/[axios]/lib/adapters/http.js:201:11

  - events.js:187 Unzip.emit
    events.js:187:15

  - _stream_readable.js:1081 endReadableNT
    _stream_readable.js:1081:12

  - next_tick.js:63 process._tickCallback
    internal/process/next_tick.js:63:19

我仅假设是由于通天塔的事情而无法完成渲染,或者如果我使用express,还有其他方法可以渲染nuxt吗?


这是我的nuxt.config.js

const pkg = require('./package')

const nodeExternals = require('webpack-node-externals')

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  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: '#8bc34a' },

  /*
  ** Global CSS
  */
  css: [
    'vuetify/src/stylus/main.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
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      if (ctx.isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^vuetify/]
          })
        ]
      }
    }
  }
}

我的package.json

{
  "name": "painter",
  "version": "1.0.0",
  "description": "JS Painter",
  "author": "Elon Salfati",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
    "build": "npm run test && nuxt build",
    "start": "cross-env NODE_ENV=production nuxt start",
    "build-start": "cross-env NODE_ENV=production npm run build && npm run start",
    "test": "nyc ava --verbose"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.3.1",
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "express-sanitizer": "^1.0.4",
    "firebase": "^5.0.4",
    "firebase-admin": "^5.12.1",
    "morgan": "^1.9.0",
    "nuxt": "^1.4.1",
    "vue-color": "^2.4.6",
    "vuetify": "^0.17.7"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.51",
    "@babel/core": "^7.0.0-beta.51",
    "@babel/node": "^7.0.0-beta.51",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.51",
    "@babel/polyfill": "^7.0.0-beta.51",
    "@babel/preset-env": "^7.0.0-beta.51",
    "@babel/preset-stage-0": "^7.0.0-beta.51",
    "@babel/register": "^7.0.0-beta.51",
    "@babel/runtime": "^7.0.0-beta.51",
    "ava": "^1.0.0-beta.6",
    "cross-env": "^5.2.0",
    "node-sass": "^4.9.0",
    "nodemon": "^1.17.5",
    "nyc": "^12.0.2",
    "sass-loader": "^7.0.3",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "supertest": "^3.1.0"
  },
  "ava": {
    "require": [
      "@babel/register",
      "@babel/polyfill"
    ]
  }
}

最后是我的.babelrc文件

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ],
    [
      "@babel/preset-stage-0",
      {
        "decoratorsLegacy": true
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

0 个答案:

没有答案