我有一個需要在 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在以下要點
我的 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"
}
}
uj5u.com熱心網友回復：
mode正如您在此處看到的那樣已過時：https : //nuxtjs.org/docs/configuration-glossary/configuration-mode#the-mode-property
我什至不知道為什么我問你是否想要target: 'server'這里，因為這甚至不合邏輯。
由于您只想擁有一個 SPA（不是 Nuxt 最有益的），您應該在您的nuxt.config.js檔案中設定以下內容
ssr: false,
target: 'static',
然后，您可以yarn generate和yarn start雙重檢查一切正常本地。如果是這樣，您可以將生成的dist目錄上傳到https://app.netlify.com/drop以進行除錯。
如果它在那里作業（它應該），那么您只需點擊幾下就可以插入一些 CI，它將使您能夠簡單地推送到您的 github 存盤庫以進行新的專案生成！
uj5u.com熱心網友回復：
這是因為缺少Vue模塊宣告，在根目錄下創建vue-shim.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
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/335691.html