Search code examples
deploymentbuildvuejs3vue-cli

Vue 3 production deployment


I am currently deploying my Vue 3 project (with Laravel API Backend) and I am having some troubles with deploying.

What I am trying to do is, I used git-ftp to push my Vue project to production server and then I run npm install and npm run build to build the app. I am getting an error:

FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory

I have read on some similar questions that one possible way was to use command with allocating more memory to Vue

npx --max_old_space_size=4095 vue-cli-service build --modern

however this produced the same error. These are my package.json dependencies (dev included)

"dependencies": {
    "@fullcalendar/core": "^5.10.1",
    "@fullcalendar/daygrid": "^5.10.1",
    "@fullcalendar/interaction": "^5.10.1",
    "@fullcalendar/vue3": "^5.10.1",
    "@popperjs/core": "^2.9.3",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "axios": "^0.21.1",
    "bootstrap": "^5.1.0",
    "core-js": "^3.6.5",
    "datatables.net": "^1.11.3",
    "datatables.net-dt": "^1.11.3",
    "dotenv": "^10.0.0",
    "jquery": "^3.6.0",
    "module": "^1.2.5",
    "moment": "^2.29.1",
    "vue": "^3.0.0",
    "vue-axios": "^3.2.5",
    "vue-plugin-load-script": "git://github.com/tserkov/vue-plugin-load-script.git#vue3",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2",
    "vuex-persistedstate": "^4.0.0",
    "webpack": "^4.3.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-minify": "^3.1.0",
    "gulp-sass": "^5.0.0",
    "prettier": "^2.2.1",
    "resolve-url-loader": "^4.0.0",
    "sass": "^1.43.2",
    "sass-loader": "^12.1.0"
  }

Is it possible, that the reason for the error is because I am running it in production? If yes, what are my other options for deploying?

I simply need to be able to push it to git repo with git commands and then push it to production and build it.


Solution

  • We have not been able to figure this out.

    Instead we used the option of runner in GitLab, so that when we merge into develop/master the script runs automatically and:

    • builds Vue project
    • pushes the content folder to ftp while also renaming it to dist