Issues with downloading a PDF after deploying Vue.js app - vue.js

So I'm creating a Vue.js web app to act as my resume. On there, I want users to be able to actually download a copy of my resume, but I can't seem to get it working correctly. On my Home.vue page, I have:
<template>
<div class="flex-grow overflow-auto max-h-screen w-full dark:text-gray-300">
<div class="m-auto pt-4 lg:grid lg:grid-cols-2 lg:grid-rows-2 lg:gap-8">
<div class="m-auto">
<img class="rounded-md" alt="headshot" src="../assets/headshot.jpg">
</div>
<div class="m-auto">
<h2 class="text-2xl pl-2 py-4 text-center lg:text-left lg:text-8xl lg:px-8">Quick blurb</h2>
</div>
<div class="lg:col-span-2 mx-auto lg:h-8">
<p class="text-base text-center lg:text-2xl">
Email
|
LinkedIn
|
GitHub
|
<a href="my_resume.pdf" download>Resume</a>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
When I'm running it locally, I have no issue downloading it. When I run yarn build and run a server from dist/, I have no issue downloading it. It's only when I deploy it on AWS Amplify and test it from there do I run into the issue (basically acting like it can't find it). I've tried putting
<a href="/my_resume.pdf" download>Resume</a>
as well as
<a :href="`${publicPath}my_resume.pdf`" download>Resume</a>
....
data () {
return {
publicPath: process.env.BASE_URL
}
}
to no avail. It's in the public/ folder, along with the index.html and an icon that it has no issues accessing. I have no idea what the issue is.


I dont know what version of vue you use and how did you configure your webpack, so i dont know if my solution is gonna work for you, but here i go:
Add assets folder to your public folder and add in it your pdf:
example
2.to your source folder add file vue.config.js if its not already there: example
define assets as your assets folder in your vue.config.js:
module.export ={
assetsDir: 'assets'
}
<a href="assets/my_resume.pdf" download>Resume</a>
here is the documantation: https://cli.vuejs.org/config/#assetsdir

Related

Vuejs - Local link works but after deploy link gets error 404 - File or directory not found

Not sure why when I run my Vue app locally, the navbar links works. But after deploy, it gets an error
404 - File or directory not found.
The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.
When I inspect it, I get:
Local - <a data-v-5e628c52="" href="/students" class="md-opjjpmhoiojifppkkcdabiobhakljdgm_doc">Students</a>
Server - <a data-v-9b8548a0="" href="/students" class="md-opjjpmhoiojifppkkcdabiobhakljdgm_doc">Students</a>
This is my App.vue:
<template>
<div id="app">
<Header
name=""
:navLinks="[
{
name: 'Home',
link: '/',
dropdown: false
},
{ name: 'Students', link: '/students', dropdown: false }
]"
/>
<router-view />
<Footer />
</div>
</template>
<script>
import Header from "./components/layout/Header";
export default {
name: "app",
components: {
Header
}
};
</script>
and my Header.vue
<template>
<div>
<nav>
<div v-if="name" id="logo">
{{ name }}
</div>
<div v-else id="logo">
<img alt="Vue logo" src="../../assets/stevelogo.png" width="50" />
</div>
<ul class="nav-links">
<li v-for="list in navLinks" :key="list.key">
<a v-if="list.dropdown === false" :href="list.link">{{
list.name
}}</a>
<div class="dropdown-link" v-else>
<a :href="list.link">
{{ list.name }}
<span>↓</span>
</a>
</div>
</li>
</ul>
<div v-on:click="openMobileNav()" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</template>
<script>
export default {
name: "Header",
};
</script>

There are two types of environment in a Vue Application (or React or Angular)
Development
Production
While you are running a development server on port 8000, all requests are handled by the development server BUT when you deploy your application all request must go into dist/index.html OR build/index.html (Depending on your build configuration)
You can try to deploy application on netlify.com with following build command
CI='' npm run build && echo "/* /index.html 200" > dist/_redirects
Else for you current deployment, you need to change configuration of the deployment so that all requests after /* goes to dist/index.html

Dynamic images failing at production build VueJs

I'm trying to load dynamic images here. My api provides me only with the filename. I combine it with the path (which is the public path of nodejs), then I require it from vuejs to show the image.
It all works fine in the development but when it comes to production build it fails and says "Cannot find the module".
I've spent tons of hours to this and still cannot find an answer.
Edit - I noticed after the production build earlier images I saved from development mode is also displayed in production build.but If I try save a new image from a production build it wouldnt work.My URL is somehow converted to point the public/img folder in vue from development mode.
in HTML
<div class="section-1" v-for="(cardinfo,index) in cardinfos" style="cursor:pointer" :key="index" #mouseover="moment(cardinfo)">
<div class="img-wrap" >
<a #click="deleteAd(cardinfo)">
<mdb-icon v-if="data.myads" icon="trash-alt" class="close red-text" size="lg" />
</a>
<img class="img-fluid ad-image" :src="getImgUrl(cardinfo.images[0])" alt="ad" v-on:click="navigateToAd(cardinfo)" />
</div>
<div class="wrapper" v-on:click="navigateToAd(cardinfo)">
<mdb-card-title>{{cardinfo.subject}}</mdb-card-title>
<hr class="mb-3" />
<div class="venue">
<strong>Venue:</strong>
<p>{{cardinfo.venue}}</p>
</div>
<div class="contact">
<strong>Contact:</strong>
<p>{{cardinfo.contact}}</p>
</div>
<div class="Conducted-By" >
<p title="Click to visit">{{cardinfo.lecturer}}</p>
</div>
</div>
<div class="info-footer">
<div class="info">
<div class="name">{{time}}</div>
</div>
</div>
</div>
in Script
getImgUrl(pic) {
return require("../../../tuition/public/images/" + pic);
}
Error
vue.runtime.esm.js:1888 Error: Cannot find module './marques-brownlee-wallpaper.jpg-1588649676704.png'
at n (.*$:142)
at s (.*$:137)
at o.getImgUrl (Card.vue:107)
at Card.vue?852f:1
at o.jt [as _l] (vue.runtime.esm.js:2630)
at o.B (Card.vue?852f:1)
at o.e._render (vue.runtime.esm.js:3548)
at o.a (vue.runtime.esm.js:4066)
at na.get (vue.runtime.esm.js:4479)
at na.run (vue.runtime.esm.js:4554)```

Can't get image to load in Vue

Can't get a simple image file to load using Vue (using a single-file component with a .vue extension). Here's the code, which I put inside template:
<div><img :src="london.jpg"></div>
What am I doing wrong?

I'm used to put all images into the public folder, so I don't need webpack to load images.
The path of the image is '/public/assets/img/london.jpg'
So, in any Vue component I can render the image using
<div>
<a href="#">
<img src="/assets/img/london.jpg" alt="london"/>
</a>
</div>

You can also directly require in your template.
<div>
<a href="#">
<img :src="require(`#/assets/img/london.jpg`)"/>
</a>
</div>
Note that the # is your src/ folder.

When binding properties, the model or data type must be correct.
To bind :src, it must be a string or data model.
<div> <img :src="'london.jpg'"></div>
or
<div> <img src="img"></div>
or
export default {
data () {
return {
img: require('london.jpg')
}
}
}
<div> <img :src="img"></div>

Images in Vue not showing up

I am having trouble displaying images in my Vue CLI project.
Here is what I have going on. This vue file accesses a json file with a few references to the individual Eyewear objects, all that works. I have references to the image I am trying to access in the json file. And with the current code, I can see the correct image reference in the browser, but it does not load the image. Is it something to do with webpack or another loader needing to load the image file?
<template>
<div>
<h1 id='callout'>Select Your Eyewear</h1>
<div id='item' v-for='item in items' :key=item.id>
<img :src='`..${item.images.frontal}`' alt='eyeware' />
<ul id='itemLIist'>
<li >
{{ item.brand }}
</li>
<li>
{{ item.name }}
</li>
</ul>
</div>
</div>
</template>
<script>
import items from "../assets/eyewear.json";
export default {
name: "ItemList",
data: function() {
return {
items: items.eyewear
};
}
};
</script>
<style scoped>
</style>

I don't know this works for you or not. But in my case providing the full path of the image works for me. in your screenshot reference starting from "../assets" instead of that try something "src/assets" (Full path with out dots)
and for make this simple, first just try to hard code full path src to a image tag and see whether it's working or not.
and let me know if this works for you. =)

Building deeply nested html with vue-cli takes forever

I found that vue-cli (2.9.6, but 3.0.0 beta* has the same issue) 's building process takes forever once the template's html gets relativelly deep.
For example, I just added some divs to App.vue which is pre-included:
<template>
<div id="app">
<img src="./assets/logo.png">
<div><div><div><div></div></div></div></div>
<HelloWorld/>
</div>
</template>
which doesn't take so long.
But once it gets this:
<template>
<div id="app">
<img src="./assets/logo.png">
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
<HelloWorld/>
</div>
</template>
then the building process takes forever, and I believe that the nest of this depth isn't so uncommon.
How should I deal with this problem?
EDIT(Details)
It seems that the problem might be environment specific, so here are the details.
This problem can be reproduced with these environments at least:
macOS High Sierra on Mac mini (Late 2014)
Ubuntu 18.04 on Dell XPS 13
and node and npm version are:
node --version
# prints
v8.9.4
# and
npm version
# prints
{ npm: '6.1.0',
ares: '1.10.1-DEV',
cldr: '31.0.1',
http_parser: '2.7.0',
icu: '59.1',
modules: '57',
nghttp2: '1.25.0',
node: '8.9.4',
openssl: '1.0.2n',
tz: '2017b',
unicode: '9.0',
uv: '1.15.0',
v8: '6.1.534.50',
zlib: '1.2.11' }
With these, I've retried the followings on my Mac:
npm uninstall -g vue-cli
npm install -g vue-cli
vue init webpack divnest
# then some Enter keys - everything is default
cd divnest
Then, open up App.vue and put many divs:
<template>
<div id="app">
<img src="./assets/logo.png">
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
<router-view/>
</div>
</template>
(Since I used the default settings here, <router-view/> is included unlike the original post, but should not be the problem.)
And finally,
npm run dev
which takes forever - specifically, the process stops at this point:
13% building modules 28/31 modules 3 active ...myname/Documents/divnest/src/App.vue
In the case of
npm run build
, the process stops at this point:
> divnest#1.0.0 build /Users/myname/Documents/divnest
> node build/build.js
Hash: 483ebabc54d5aed79fd7
Version: webpack 3.12.0
Time: 13742ms
Asset Size Chunks Chunk Names
static/js/vendor.7fed9fa7b7ba482410b7.js 112 kB 0 [emitted] vendor
static/js/app.f1ebca7a6e0ec0b7ebdf.js 12 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
static/css/app.30790115300ab27614ce176899523b62.css 432 bytes 1 [emitted] app
static/css/app.30790115300ab27614ce176899523b62.css.map 828 bytes [emitted]
static/js/vendor.7fed9fa7b7ba482410b7.js.map 553 kB 0 [emitted] vendor
static/js/app.f1ebca7a6e0ec0b7ebdf.js.map 23.3 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 509 bytes [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
94% asset optimization
and if I let it go, it takes... 1155409ms!!!!
DONE Compiled successfully in 1155409ms 13:35:34
I Your application is running here: http://localhost:8080
MORE EDIT
As #tony19 pointed out, prettier is the likely suspect. Following the advice, I've tried some patterns with Ubuntu 18.04 (not Mac because Mac isn't here right now, sorry) and my results are:
vue-cli 2.9.6 + npm run dev - hang
vue-cli 2.9.6 + npm run build - 6 secs (This is so confusing. What was the 1 million seconds above!? Maybe reinstalling vue-cli owes the change?)
vue-cli 3.0.0-beta16 + vue serve - hang (as opposed to #tony19's report)
vue-cli 3.0.0-beta16 + vue build - 5 secs
EVEN MORE EDIT
So, it seems that this is definitely caused by prettier.
https://github.com/prettier/prettier/issues/1250
is the original issue that addressed this problem and the dev team thought that https://github.com/prettier/prettier/pull/2259 fixed it, but the reality is that it couldn't handle my case, as #tony19 shows it on https://github.com/prettier/prettier/issues/4672 . Oh well.
"SOLUTION"
I ended up doing this - following #tony19's report, changing /node_modules/vue-loader/lib/template-compiler/index.js lines 78:81
if (!isProduction) {
code = prettier.format(code, { semi: false })
}
to
// if (!isProduction) {
// code = prettier.format(code, { semi: false })
// }
thus the problem is solved. Thank you frontend, thank you.

I can reproduce the performance issue as you described (macOS High Sierra 10.13.4, Node 8.9.4 and 9.11.1). The issue also occurs with a newly created vue-cli 3.x project.
The hang is actually happening in prettier, called from vue-loader's template compiler. The nested <div>s are converted into JavaScript by vue-loader, and that becomes the following snippet:
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"app"}},[_c('img',{attrs:{"src":require("./assets/logo.png")}}),_vm._v(" "),_c('router-view'),_vm._v(" "),_vm._m(0)],1)}
var staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div',[_c('div')])])])])])])])])])])])])])])])])])])])])])])])])}]
vue-loader passes this long string to prettier, which takes about 159 seconds to process. The cause of the bug is the deeply nested function calls that create the divs. I've reported this bug in prettier (Issue 4672).
In the meantime, I recommend refactoring your HTML to avoid deep nesting. If you need to stick with the old template, you could workaround the issue by building in production mode, as vue-loader skips prettier for production builds:
NODE_ENV=production npm run dev
UPDATE vue-loader v15.5.0 adds the prettify option to allow disabling prettier (update to the latest version of #vue/cli to ensure your vue-loader is current with the new option). You can use this option as follows:
Add vue.config.js (if it doesn't exist already) to the root of your project.
Edit the file to include:
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.prettify = false
return options
})
}
}

Update 2019
Recently vue-loader added a flag in their options in order to disable prettier also during development.
Just add prettify: false to your vue-loader options.
https://vue-loader.vuejs.org/options.html#prettify
Notice: Just make sure you have the latest vue-loader version

I had similar issues with vue-cli 3.1.1 (TypeScript + SCSS) and Bootstrap (which by default requires some nesting). Example structure:
<template>
<div class="container">
<div class="row">
<div class="col-12">
<div class="card-deck">
<div class="card">
<div class="card-body">
<div class="accordion">
<div class="card">
<div class="card-header">
...
</div>
<div class="collapse">
<div class="card-body">
<div class="row">
<div class="col-12 form-group">
<label>...</label>
<div class="dropdown">
<button class="custom-select" type="button" data-toggle="dropdown">{{someValue}}</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" :data-key="somekey1" #click="onClickMethod">value1</a>
<a class="dropdown-item" href="#" :data-key="somekey2" #click="onClickMethod">value2</a>
...
needed ~12 seconds to compile 400+ lines of code (template + TypeScript + SCSS). After removing:
:data-key="somekey1" #click="onClickMethod"
:data-key="somekey2" #click="onClickMethod"
the code needed ~5-6 seconds to compile. After moving the code to custom component (and some TypeScript code from Vue component to Helper.ts file):
<template>
<div class="container">
<div class="row">
<div class="col-12">
<div class="card-deck">
<div class="card">
<div class="card-body">
<div class="accordion">
<div class="card">
<div class="card-header">
...
</div>
<div class="collapse">
<div class="card-body">
<SubComponent/>
it needs ~700ms to compile (one main component and two additional sub-components, each file having less than 100 lines of code + Helper.ts having exactly 97 lines of code).
So if you suffer from poor npm run serve performance, try sub-components first, I didn't noticed much difference in compile time while invoking npm run build so I assume (maybe incorrectly) that this problem is also caused by code prettifier which is enabled for serve but disabled for build (TSLint is not invoked on save action so it does not affect npm run serve in my case).

I do not have any particular issue with your 25 nested <div>'s: (below example with Vue runtime compiler, so that you can easily test it directly in your browser)
new Vue({
el: '#app',
template: '#app-template',
});
#app div {
border: 1px solid grey;
padding: 1px;
}
<script src="https://unpkg.com/vue#2"></script>
<div id="app">
</div>
<template id="app-template">
<div id="app">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>25 nested <code><div></code>'s</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
Here is a demo with a Vue CLI project on CodeSandbox, probably closer to your example: https://codesandbox.io/s/v3knpl447l
(i.e. it precompiles the templates, so the building process actually happens on CodeSandbox server)