next在heroku上构建不工作，但在本地运行

Question

我有一个下一个应用程序，我需要部署在heroku。本地一切都很好。当我安装依赖关系(本地)有很多未满足的依赖关系，但就像我说的，它工作完美，即使当我运行构建脚本。然而，当我推到heroku时，它说构建成功，但应用程序不工作。然后我尝试在heroku上使用bash命令手动构建应用程序。当我运行构建脚本时，它无法生成以下错误:

│   ✖ Nuxt Fatal Error                                   │
Error: Cannot find module '@nuxt/typescript-build'   │
│   Require stack:                                       │
│   - /app/node_modules/@nuxt/core/dist/core.js          │
│   - /app/node_modules/@nuxt/cli/dist/cli-index.js      │
│   - /app/node_modules/@nuxt/cli/dist/cli.js            │
│   - /app/node_modules/nuxt/bin/nuxt.js              

在package.json中检查'@nuxt/typescript-build'时devDependencies(在构建应用程序之前运行yarn install)

package.json以及nuext .config.js和Procfile都在以下要点

Mynuxt.config.js

import colors from "vuetify/es5/util/colors";
import i18n from "./i18n";
export default {
mode: "spa",
/*
** Headers of the page
*/
head: {
titleTemplate: "%s - " + process.env.npm_package_name,
title: process.env.npm_package_name || "",
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{
hid: "description",
name: "description",
content: process.env.npm_package_description || "",
},
],
script: [{ src: "https://use.fontawesome.com/releases/v5.0.6/js/all.js" }],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Monoton&display=swap",
},
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons",
},
],
},
server: {
host: "0.0.0.0", // default: localhost
},
env: {
BASE_URL: process.env.BASE_URL,
},
/*
** Customize the progress-bar color
*/
loading: { color: "#fff" },
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
*/
plugins: [
{ src: "~/plugins/vuex-persist", ssr: false },
"~/plugins/filters.js",
"~/plugins/vue-youtube.js",
"~/plugins/vue-shortkey.js",
"~/plugins/services.ts",
"~/plugins/color.ts",
"~/plugins/role.ts",
],
/*
** Nuxt.js modules
*/
modules: [
["nuxt-i18n", i18n],
"@nuxtjs/vuetify",
// Doc: https://axios.nuxtjs.org/usage
"@nuxtjs/axios",
"@nuxtjs/eslint-module",
],
buildModules: [
"@nuxt/typescript-build",
"@nuxtjs/composition-api/module",
[
"@nuxtjs/google-analytics",
{
id: process.env.GOOGLE_TRACKING_ID,
},
],
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
proxy: false,
},
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
theme: {
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,
themes: {
dark: {
primary: "#21CFF3",
accent: "#FF4081",
secondary: "#ffe18d",
success: "#4CAF50",
info: "#2196F3",
warning: "#FB8C00",
error: "#FF5252",
},
light: {
primary: "#1976D2",
accent: "#e91e63",
secondary: "#30b1dc",
success: "#4CAF50",
info: "#2196F3",
warning: "#FB8C00",
error: "#FF5252",
},
},
},
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
publicPath: process.env.PUBLIC_PATH || "/_nuxt/",
extend(config, ctx) {
// config.module.rules.push({
//   test: /.(txt|csv|conll|jsonl)$/i,
//   loader: 'file-loader',
//   options: {
//     name: '[path][name].[ext]'
//   }
// })
config.module.rules.push({
enforce: "pre",
test: /.(txt|csv|json|jsonl)$/,
loader: "raw-loader",
exclude: /(node_modules)/,
});
config.module.rules.push({
test: /.(ogg|mp3|wav|mpe?g)$/i,
loader: "file-loader",
options: {
name: "[path][name].[ext]",
},
});
},
},
};

Mypackage.json

{
"name": "doccano",
"version": "1.0.0",
"description": "doccano is an open source annotation tools for machine learning practitioner.",
"author": "Hironsan",
"private": true,
"scripts": {
"lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
"lintfix": "eslint --fix --ext .ts,.js,.vue --ignore-path .gitignore .",
"precommit": "yarn lint",
"test": "jest",
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"@nuxtjs/axios": "^5.12.0",
"@nuxtjs/composition-api": "^0.23.4",
"@nuxtjs/proxy": "^2.0.1",
"@nuxtjs/vuetify": "^1.11.2",
"@toast-ui/vue-editor": "^1.1.1",
"@vuejs-community/vue-filter-date-format": "^1.6.3",
"@vuejs-community/vue-filter-date-parse": "^1.1.6",
"chart.js": "^2.9.3",
"codemirror": "^5.55.0",
"filepond": "^4.26.1",
"filepond-plugin-file-validate-type": "^1.2.6",
"js-cookie": "^2.2.1",
"lodash": "^4.17.21",
"nuxt": "^2.11.0",
"nuxt-i18n": "^6.13.12",
"papaparse": "^5.2.0",
"sweetalert": "^2.1.2",
"sweetalert2": "^11.1.7",
"tui-editor": "^1.4.10",
"vue-chartjs": "^3.5.0",
"vue-filepond": "^6.0.0",
"vue-shortkey": "^3.1.7",
"vue-youtube": "^1.4.0",
"vuetify": "^2.3.4",
"vuex-persist": "^3.1.3",
"wavesurfer.js": "^5.0.1",
"yarn": "^1.22.4"
},
"devDependencies": {
"@nuxt/types": "^2.14.12",
"@nuxt/typescript-build": "^2.0.4",
"@nuxtjs/eslint-config": "^3.0.0",
"@nuxtjs/eslint-config-typescript": "^5.0.0",
"@nuxtjs/eslint-module": "^2.0.0",
"@nuxtjs/google-analytics": "^2.3.0",
"@nuxtjs/google-fonts": "^1.3.0",
"@types/lodash": "^4.14.168",
"@types/wavesurfer.js": "^5.0.1",
"@vue/test-utils": "^1.0.3",
"axios-mock-adapter": "^1.18.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.1.0",
"eslint": "^7.19.0",
"eslint-config-prettier": "^7.2.0",
"eslint-config-standard": ">=14.1.1",
"eslint-plugin-import": ">=2.22.0",
"eslint-plugin-jest": ">=23.18.0",
"eslint-plugin-node": ">=11.1.0",
"eslint-plugin-nuxt": "^1.0.0",
"eslint-plugin-promise": ">=4.0.1",
"eslint-plugin-standard": ">=4.0.1",
"eslint-plugin-vue": "^6.2.2",
"jest": "^26.1.0",
"nodemon": "^2.0.4",
"prettier": "^2.2.1",
"raw-loader": "^4.0.2",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue-jest": "^3.0.6"
}
}

Answer 1

我将确保devDependencies正在安装:您有"@nuxt/typescript-build": "^2.0.4",作为开发依赖…

确保你设置了这个配置值:NPM_CONFIG_PRODUCTION=false以便安装devDependencies !你可以在应用程序设置"Config "节中,或使用Heroki cli:heroku config:set NPM_CONFIG_PRODUCTION=false

Answer 2

mode已经过时了，您可以在这里看到:https://nuxtjs.org/docs/configuration-glossary/configuration-mode#the-mode-property

我甚至不知道为什么我问你是否想要一个target: 'server'，因为它甚至不符合逻辑。
既然你想让只有一个SPA(对于next来说不是最有利的)，您应该在nuxt.config.js文件

中设置以下内容

ssr: false,
target: 'static',

然后，您可以yarn generate和yarn start来再次检查一切是否在本地工作。如果是这样，您可以将生成的dist目录上传到https://app.netlify.com/drop以进行调试。

如果它在那里工作(它应该)，然后你可以通过点击几下插入一些CI，它将使你能够简单地推送到你的github仓库来生成一个新的项目!

Answer 3

由于缺少Vue模块声明，请创建Vue - shimm .d。在根目录下的Ts文件中添加以下内容

declare module '*.vue' {
import Vue from 'vue'
export default Vue
}

参考文档:https://typescript.nuxtjs.org/guide/setup.html

和这里提到的:https://github.com/nuxt/typescript/issues/153#issuecomment-543010838