我正在用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"
]
}