Page appears completly in blank

Hi!! I made my project using Vue-Cli, loading it from GitHub everything is okey but when I opened my deployment there was nothing but a blank page, I gotta say my favicon.ico at least got loaded, I got no errors in my building scripts I dunno what what could got wrong.

the GitHub repository: GitHub - Tadeo-2404/Pagina-de-Recetas: Pagina de Recetas, usando VueJS-3, Vue-Router, Bootstrap-5, Sass, Gulp,

Also, I already checked the DevTools and I got no errors.

9:20:07 PM: Build ready to start
9:20:10 PM: build-image version: a49edbc55fc722f80f6b85963a5060f8d043a844 (focal)
9:20:10 PM: build-image tag: v4.8.1
9:20:10 PM: buildbot version: f89dd42aa70d76d1da992dc3fa004a4c745208bc
9:20:11 PM: Fetching cached dependencies
9:20:11 PM: Failed to fetch cache, continuing with build
9:20:11 PM: Starting to prepare the repo for build
9:20:11 PM: No cached dependencies found. Cloning fresh repo
9:20:11 PM: git clone GitHub - Tadeo-2404/Pagina-de-Recetas: Pagina de Recetas, usando VueJS-3, Vue-Router, Bootstrap-5, Sass, Gulp,
9:20:11 PM: Preparing Git Reference refs/heads/main
9:20:12 PM: Parsing package.json dependencies
9:20:13 PM: Starting build script
9:20:13 PM: Installing dependencies
9:20:13 PM: Python version set to 2.7
9:20:13 PM: v16.15.1 is already installed.
9:20:14 PM: Now using node v16.15.1 (npm v8.11.0)
9:20:14 PM: Started restoring cached build plugins
9:20:14 PM: Finished restoring cached build plugins
9:20:14 PM: Attempting ruby version 2.7.2, read from environment
9:20:15 PM: Using ruby version 2.7.2
9:20:15 PM: Using PHP version 8.0
9:20:15 PM: No npm workspaces detected
9:20:15 PM: Started restoring cached node modules
9:20:15 PM: Finished restoring cached node modules
9:20:16 PM: Installing NPM modules using NPM version 8.11.0
9:20:16 PM: npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
9:20:16 PM: npm WARN config location in the cache, and they are managed by
9:20:16 PM: npm WARN config cacache.
9:20:16 PM: npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
9:20:16 PM: npm WARN config location in the cache, and they are managed by
9:20:16 PM: npm WARN config cacache.
9:20:17 PM: npm WARN old lockfile
9:20:17 PM: npm WARN old lockfile The package-lock.json file was created with an old version of npm,
9:20:17 PM: npm WARN old lockfile so supplemental metadata must be fetched from the registry.
9:20:17 PM: npm WARN old lockfile
9:20:17 PM: npm WARN old lockfile This is a one-time fix-up, please be patient…
9:20:17 PM: npm WARN old lockfile
9:20:20 PM: npm WARN old lockfile HttpErrorGeneral: 404 Not Found - GET https://registry.npmjs.org/@vue%2Fvue-loader-v15 - Not found
9:20:20 PM: npm WARN old lockfile at /opt/buildhome/.nvm/versions/node/v16.15.1/lib/node_modules/npm/node_modules/npm-registry-fetch/lib/check-response.js:93:15
9:20:20 PM: npm WARN old lockfile at runMicrotasks ()
9:20:20 PM: npm WARN old lockfile at processTicksAndRejections (node:internal/process/task_queues:96:5)
9:20:20 PM: npm WARN old lockfile at async RegistryFetcher.packument (/opt/buildhome/.nvm/versions/node/v16.15.1/lib/node_modules/npm/node_modules/pacote/lib/registry.js:92:19)
9:20:20 PM: npm WARN old lockfile at async RegistryFetcher.manifest (/opt/buildhome/.nvm/versions/node/v16.15.1/lib/node_modules/npm/node_modules/pacote/lib/registry.js:124:23)
9:20:20 PM: npm WARN old lockfile at async Array. (/opt/buildhome/.nvm/versions/node/v16.15.1/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:784:9)
9:20:20 PM: npm WARN old lockfile Could not fetch metadata for @vue/vue-loader-v15@15.9.8 HttpErrorGeneral: 404 Not Found - GET https://registry.npmjs.org/@vue%2Fvue-loader-v15 - Not found
9:20:20 PM: npm WARN old lockfile at /opt/buildhome/.nvm/versions/node/v16.15.1/lib/node_modules/npm/node_modules/npm-registry-fetch/lib/check-response.js:93:15
9:20:20 PM: npm WARN old lockfile at runMicrotasks ()
9:20:20 PM: npm WARN old lockfile at processTicksAndRejections (node:internal/process/task_queues:96:5)
9:20:20 PM: npm WARN old lockfile at async RegistryFetcher.packument (/opt/buildhome/.nvm/versions/node/v16.15.1/lib/node_modules/npm/node_modules/pacote/lib/registry.js:92:19)
9:20:20 PM: npm WARN old lockfile at async RegistryFetcher.manifest (/opt/buildhome/.nvm/versions/node/v16.15.1/lib/node_modules/npm/node_modules/pacote/lib/registry.js:124:23)
9:20:20 PM: npm WARN old lockfile at async Array. (/opt/buildhome/.nvm/versions/node/v16.15.1/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:784:9) {
9:20:20 PM: npm WARN old lockfile headers: [Object: null prototype] {
9:20:20 PM: npm WARN old lockfile date: [ ‘Sat, 18 Jun 2022 02:20:20 GMT’ ],
9:20:20 PM: npm WARN old lockfile ‘content-type’: [ ‘application/json’ ],
9:20:20 PM: npm WARN old lockfile ‘content-length’: [ ‘21’ ],
9:20:20 PM: npm WARN old lockfile connection: [ ‘keep-alive’ ],
9:20:20 PM: npm WARN old lockfile ‘expect-ct’: [
9:20:20 PM: npm WARN old lockfile ‘max-age=604800, report-uri=“https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct”’
9:20:20 PM: npm WARN old lockfile ],
9:20:20 PM: npm WARN old lockfile vary: [ ‘Accept-Encoding’ ],
9:20:20 PM: npm WARN old lockfile server: [ ‘cloudflare’ ],
9:20:20 PM: npm WARN old lockfile ‘cf-ray’: [ ‘71d08b924a0f7fbb-IAD’ ],
9:20:20 PM: npm WARN old lockfile ‘x-fetch-attempts’: [ ‘1’ ],
9:20:20 PM: npm WARN old lockfile ‘x-local-cache-status’: [ ‘skip’ ]
9:20:20 PM: npm WARN old lockfile },
9:20:20 PM: npm WARN old lockfile statusCode: 404,
9:20:20 PM: npm WARN old lockfile code: ‘E404’,
9:20:20 PM: npm WARN old lockfile method: ‘GET’,
9:20:20 PM: npm WARN old lockfile uri: ‘https://registry.npmjs.org/@vue%2Fvue-loader-v15’,
9:20:20 PM: npm WARN old lockfile body: { error: ‘Not found’ },
9:20:20 PM: npm WARN old lockfile pkgid: ‘@vue/vue-loader-v15@15.9.8’
9:20:20 PM: npm WARN old lockfile }
9:20:35 PM: npm WARN deprecated source-map-url@0.4.1: See GitHub - lydell/source-map-url: [DEPRECATED] Tools for working with sourceMappingURL comments.
9:20:35 PM: npm WARN deprecated har-validator@5.1.5: this library is no longer supported
9:20:35 PM: npm WARN deprecated resolve-url@0.2.1: GitHub - lydell/resolve-url: [DEPRECATED] Like Node.js’ `path.resolve`/`url.resolve` for the browser.
9:20:35 PM: npm WARN deprecated source-map-resolve@0.5.3: See GitHub - lydell/source-map-resolve: [DEPRECATED] Resolve the source map and/or sources for a generated file.
9:20:36 PM: npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See There’s Math.random(), and then there’s Math.random() · V8 for details.
9:20:36 PM: npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See There’s Math.random(), and then there’s Math.random() · V8 for details.
9:20:37 PM: npm WARN deprecated request@2.88.2: request has been deprecated, see Request’s Past, Present and Future · Issue #3142 · request/request · GitHub
9:20:45 PM: npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
9:20:45 PM: npm WARN deprecated urix@0.1.0: Please see GitHub - lydell/urix: [DEPRECATED] Makes Windows-style paths more unix and URI friendly.
9:20:46 PM: npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
9:20:50 PM: added 1667 packages, and audited 1668 packages in 34s
9:20:50 PM: 143 packages are looking for funding
9:20:50 PM: run npm fund for details
9:20:50 PM: 27 vulnerabilities (12 low, 15 high)
9:20:50 PM: To address issues that do not require attention, run:
9:20:50 PM: npm audit fix
9:20:50 PM: To address all issues (including breaking changes), run:
9:20:50 PM: npm audit fix --force
9:20:50 PM: Run npm audit for details.
9:20:51 PM: NPM modules installed
9:20:51 PM: npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
9:20:51 PM: npm WARN config location in the cache, and they are managed by
9:20:51 PM: npm WARN config cacache.
9:20:51 PM: Started restoring cached go cache
9:20:51 PM: Finished restoring cached go cache
9:20:51 PM: Installing Go version 1.17 (requested 1.17)
9:20:56 PM: unset GOOS;
9:20:56 PM: unset GOARCH;
9:20:56 PM: export GOROOT=‘/opt/buildhome/.gimme/versions/go1.17.linux.amd64’;
9:20:56 PM: export PATH=“/opt/buildhome/.gimme/versions/go1.17.linux.amd64/bin:${PATH}”;
9:20:56 PM: go version >&2;
9:20:56 PM: export GIMME_ENV=“/opt/buildhome/.gimme/env/go1.17.linux.amd64.env”
9:20:56 PM: go version go1.17 linux/amd64
9:20:56 PM: Installing missing commands
9:20:56 PM: Verify run directory
9:20:57 PM: ​
9:20:57 PM: ────────────────────────────────────────────────────────────────
9:20:57 PM: Netlify Build
9:20:57 PM: ────────────────────────────────────────────────────────────────
9:20:57 PM: ​
9:20:57 PM: ❯ Version
9:20:57 PM: @netlify/build 27.1.5
9:20:57 PM: ​
9:20:57 PM: ❯ Flags
9:20:57 PM: baseRelDir: true
9:20:57 PM: buildId: 62ad3657aa8c741d3bb7c899
9:20:57 PM: deployId: 62ad3657aa8c741d3bb7c89b
9:20:57 PM: ​
9:20:57 PM: ❯ Current directory
9:20:57 PM: /opt/build/repo
9:20:57 PM: ​
9:20:57 PM: ❯ Config file
9:20:57 PM: No config file was defined: using default values.
9:20:57 PM: ​
9:20:57 PM: ❯ Context
9:20:57 PM: production
9:20:57 PM: ​
9:20:57 PM: ────────────────────────────────────────────────────────────────
9:20:57 PM: 1. Build command from Netlify app
9:20:57 PM: ────────────────────────────────────────────────────────────────
9:20:57 PM: ​
9:20:57 PM: $ npm run build
9:20:57 PM: npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
9:20:57 PM: npm WARN config location in the cache, and they are managed by
9:20:57 PM: npm WARN config cacache.
9:20:57 PM: > vue-project@0.1.0 build
9:20:57 PM: > vue-cli-service build
9:20:58 PM: All browser targets in the browserslist configuration have supported ES module.
9:20:58 PM: Therefore we don’t build two separate bundles for differential loading.
9:20:58 PM: - Building for production…
9:21:15 PM: WARNING Compiled with 3 warnings2:21:15 AM
9:21:15 PM: warning in ./node_modules/bootstrap/dist/css/bootstrap.css
9:21:15 PM: Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
9:21:15 PM: Warning
9:21:15 PM: (2482:3) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
9:21:15 PM: warning
9:21:15 PM: asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
9:21:16 PM: Creating deploy upload records
9:21:15 PM: This can impact web performance.
9:21:15 PM: Assets:
9:21:15 PM: assets/recetas/mariscos/brocheta-camarones-diabla-chipotle.png (467 KiB)
9:21:15 PM: assets/recetas/mariscos/tostada-mariscos.png (389 KiB)
9:21:15 PM: assets/recetas/postres/donas-receta-enjambre.png (842 KiB)
9:21:15 PM: assets/recetas/postres/galleta-avena-amaranto.png (802 KiB)
9:21:15 PM: assets/recetas/postres/natilla-te-verde.png (607 KiB)
9:21:15 PM: warning
9:21:15 PM: entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
9:21:16 PM: Starting post processing
9:21:15 PM: Entrypoints:
9:21:15 PM: app (403 KiB)
9:21:15 PM: css/chunk-vendors.49ca379a.css
9:21:15 PM: js/chunk-vendors.3cf61f85.js
9:21:16 PM: Post processing - HTML
9:21:15 PM: css/app.f5ebbdcf.css
9:21:15 PM: js/app.a58564d5.js
9:21:16 PM: File Size Gzipped
9:21:16 PM: dist/js/chunk-vendors.3cf61f85.js 192.04 KiB 64.16 KiB
9:21:16 PM: dist/js/app.a58564d5.js 52.14 KiB 16.65 KiB
9:21:16 PM: Post processing - header rules
9:21:16 PM: dist/js/997.16d9d19f.js 2.02 KiB 0.79 KiB
9:21:16 PM: dist/js/398.f485cdac.js 1.66 KiB 0.69 KiB
9:21:16 PM: dist/js/477.e32efaf7.js 1.56 KiB 0.78 KiB
9:21:16 PM: dist/js/226.6c766f79.js 0.85 KiB 0.53 KiB
9:21:16 PM: Post processing - redirect rules
9:21:16 PM: dist/css/chunk-vendors.49ca379a.css 158.38 KiB 23.26 KiB
9:21:16 PM: dist/css/app.f5ebbdcf.css 0.03 KiB 0.04 KiB
9:21:16 PM: Images and other types of assets omitted.
9:21:17 PM: Post processing done
9:21:16 PM: Build at: 2022-06-18T02:21:16.006Z - Hash: b48cf55789ea0b9a - Time: 16470ms
9:21:16 PM: DONE Build complete. The dist directory is ready to be deployed.
9:21:16 PM: INFO Check out deployment instructions at Deployment | Vue CLI
9:21:16 PM: ​
9:21:16 PM: (build.command completed in 18.3s)
9:21:16 PM: ​
9:21:16 PM: ────────────────────────────────────────────────────────────────
9:21:16 PM: 2. Deploy site
9:21:16 PM: ────────────────────────────────────────────────────────────────
9:21:16 PM: ​
9:21:16 PM: Starting to deploy site from ‘public’
9:21:16 PM: Creating deploy tree
9:21:16 PM: 1 new files to upload
9:21:16 PM: 0 new functions to upload
9:21:16 PM: Site deploy was successfully initiated
9:21:16 PM: ​
9:21:16 PM: (Deploy site completed in 367ms)
9:21:16 PM: ​
9:21:16 PM: ────────────────────────────────────────────────────────────────
9:21:16 PM: Netlify Build Complete
9:21:16 PM: ────────────────────────────────────────────────────────────────
9:21:16 PM: ​
9:21:16 PM: (Netlify Build completed in 18.7s)
9:21:16 PM: Caching artifacts
9:21:16 PM: Started saving node modules
9:21:16 PM: Finished saving node modules
9:21:16 PM: Started saving build plugins
9:21:16 PM: Finished saving build plugins
9:21:16 PM: Started saving pip cache
9:21:16 PM: Finished saving pip cache
9:21:16 PM: Started saving emacs cask dependencies
9:21:16 PM: Finished saving emacs cask dependencies
9:21:16 PM: Started saving maven dependencies
9:21:16 PM: Finished saving maven dependencies
9:21:16 PM: Started saving boot dependencies
9:21:16 PM: Finished saving boot dependencies
9:21:16 PM: Started saving rust rustup cache
9:21:16 PM: Finished saving rust rustup cache
9:21:16 PM: Started saving go dependencies
9:21:16 PM: Finished saving go dependencies
9:21:17 PM: Build script success
9:21:19 PM: Site is live :sparkles:
9:21:34 PM: Finished processing build request in 1m23.438848097s

Hey @tadeo.alvarez4434

You are not deploying the built site, you are deploying the public directory. As noted in the Vue CLI Deploy to Netlify documentation and the Netlify Vue CLI documentation, you need to set the publish directory to dist.

You can also see in the log that this is the location Vue is writing files to, e.g.

thanks a lot!! it worked but now my Sass styles are not loading, I’m loading the Sass styles with webpack and I guess this issue is because my index.html got no link to the styles, what would you recommend me to do?

this is the final page: MyRecipe (62ad3f0085b35024e0105621–super-dragon-24f9e2.netlify.app)

It appears the sass styling isn’t getting built with everything else. Unfortunately I can’t offer any guidance as I have not used sass much.

I can see the styles are loading fine:

and they’re also being applied correctly: