【发布时间】：2021-12-10 05:50:31
【问题描述】：
我有一个需要在heroku 上部署的nuxt 应用程序。本地一切正常。当我（本地）安装依赖项时，有很多未满足的依赖项，但就像我说的那样，即使我运行构建脚本，它也能完美运行。但是，当我推送到 heroku 时，它说构建成功，但应用程序不起作用。然后我尝试通过在heroku上使用bash命令在heroku上手动构建应用程序。当我运行构建脚本时，它无法构建并出现此错误：
│ ✖ 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以及nuxt.config.js和Procfile的内容在下面gist
我的nuxt.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]",
},
});
},
},
};
我的package.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"
}
}
【问题讨论】：
-
您能否分享您的
nuxt.config.js文件，并说明您在本地运行时运行哪些命令，以及用于生产的命令？ -
@kissu 我在本地运行的命令如下：
yarn install安装依赖项，输出未满足的对等依赖项yarn build代表nuxt build构建我的nuxt 应用程序yarn start代表@987654332 @ 在构建后运行我的应用程序 -
你需要一个服务器还是静态好的？
-
我已经编译成SPA模式了
-
这个模式已经不存在了。您需要有一个
target和ssr组合。因此，对于 SPA，您需要拥有ssr: true，但您可以选择'static'或'server'，具体取决于您想要托管它的位置。你需要一个服务器还是静态的好？
标签： node.js vue.js heroku nuxt.js