I am a bit new to Vue.js. I am doing a social media application that allows users to upload and share images with others. I store my images in src/assets folder during development. However, when I build the project, all images are put in the dist folder. Therefore, what can I do to enable users to still upload images on production? Do I create the assets directory in the dist folder?
I have since tried different ways, including storing images on the backend. In dooing this, I reference the backend path relatively, using, for example, ../../../backend/public/assets..., and it works on development. However, when I build, the images that existed in the backend directory at the time of building are visible, however, whenever I try uploading more on production to the ../../../backend/public/assets... directory, they are uploaded successfully but are not visible (that is on production). I get an error that Cannot find module './image_name.image_extension'.
What am I doing wrong?
I have seen similar questions like this but there was no answer.
You must set your public path and change your way!!
first step to do is creating vue.config.js in your root directory, if you want to know more details, read this: https://cli.vuejs.org/config/
for example, I define prefix path for my files:
module.exports = {
publicPath:
process.env.NODE_ENV === "production" ? "/" : "/",
};
remember, It's better if you use "#" to define your paths.
for example, if you want to load a image which located in src/assets/files/img/myImage.png, you can use #/assets/files/img/myImage.png in template section for binding or script section of your .vue files!
It always help you to find correct path of your files.
and finally your way is not standard because "src/assets/..." will used for compiled scripts and styles and also your files which you want to use on your UI layout like static images. so you have to use "public/assets/..." directory to save your file, then you will see everything is going well for you.
if you have a more question or stuck solving this problem again, I'm here to fix your issues.
Related
Im trying to upload static files(images and js) from "static" folder. And it works fine for index file and base route localhost:8000/, but if I go to the next route localhost:8000/reviews/master001 then static files disappears and I receive by route localhost:8000/reviews/js. And there is two things, first is how to remove prefix "reviews"?
I tried to use in nuxt.config.js
static: {
prefix: false
}
by documentation, but it does not work. Tried to use paths in nuxt.config like "../js", "#/static/js", "/js" - this one works for index file.
Also there are no any static files after I go through the router-link such it in nuxt documentation for path localhost:8000/reviews/master001.
Here there are.
And here there no any files.
As explained in the comments above, images should be in assets and static is only aimed for specific use cases, like exposing a publicly accessible .pdf file.
If you want to install and use jQuery properly into your Nuxt project, you can follow my answer here: https://stackoverflow.com/a/68414170/8816585
If you want to load a specific script and cannot do it in a more cleaner way (with NPM), you can also follow the instructions there: https://stackoverflow.com/a/67535277/8816585
Use this as a last resort tho and be aware that it will increase bundle size and loading time.
I have a website built with a Strapi/Nuxt stack.
I can make it totally static, instead of pre-rendering pages, but I still need to retrieve the images or other assets from Strapi, so I still do need a server.
During the "compilation", the Strapi API is fetched and the contents used to pre-render all the pages I want: would be possible to also download all the assets into the dist directory during the nuxt generate operation?
During the build, you can query Strapi's API and get the assets URL, nothing blocking you here.
Otherwise, you could also download the file itself and write it down into your project.
Here is one my answer that you can get some ideas from: How to access remote data and write it into a file during Nuxt build?
It's not Webpack's job to do this neither. As a pre-build tool, I guess that you can use nodejs-file-downloader and use it at the top of your nuxt.config.js file.
This one looks great and is active: https://github.com/hgouveia/node-downloader-helper
Is there any way of generating a Google : ads.txt file every time i build my SSR project?
There is a module called: sitemap-module from nuxt-community, it is used to generate a sitemap xml file, and that file can be accessed by http://domain.tls/sitemap.xml. and i want something like that.
So currently i'am achieving this by building the project, then manually put ads.txt it in : /var/www/site/.nuxt/dist/client/,
The problem with this is that everytime i rebuild the project i loose /var/www/site/.nuxt/dist/client/ folder then i have to add ads.txt file again.
I would like to know how i can hook up my code to tell nuxt to generate ads.txt file and put it in /var/www/site/.nuxt/dist/client/
Not sure if it makes sense, but i hope someone will understand.
Place your ads.txt file in a directory named static as mentioned here. All the contents of the static directory can be accessed via example.com/{filename.extension}
If you are not using nuxt.js and just using vue js, place it in a public directory right next to src directory.
Haven't found any way of solving this in nuxt, so i decided to redirect all https://domain.tld/ads.txt in Nginx configuration.
/etc/nginx/sites-available/default.conf
#redirect all txt request
location ~* ^.+.(txt)$ {
root /var/www/other.files/;
}
So i think i'll stick to it.
I have developed a vue application and did run npm run build
After that I uploaded the content in the dist file to my webpage but it returned a blank page.
Since I did this for testing I uploaded it to a folder in my public_html/mypage.com/vueapplication To get all the paths right I added a vue.config.js with this content:
// vue.config.js
module.exports = {
publicPath: '/vueapplication/'
}
The application now works but I wounder however:
how do I best publish/upload the application to my site? Just by simply dragging the content inte the right folder?
how can I best maintain my site? Do I need to build again and upload, overwriting my files when everytime I make an update on my site?
And what is the difference between build and deploy your application?
Drag and dropping your code should work. But as your app grows you may want to look into automating this. For instance if you use an S3 bucket you can use the aws cli to automate the upload.
Yes, you should overwrite your deploy folder(s). You need to also take care of deploying different binary files, that have the same name. An example is if you have a global css file (main.css for instance). The file will probably change content between deployments, but keep the same name. Browsers may cache the file so users that downloaded older versions of the file will not use the new one. There are different techniques to handle this, but if you use webpack, it uses cache busting techniques and you should be fine.
Build is the process of transforming source code into an artifact(s). Exactly what this means differs from language to language, platform to platform. In the vuejs world this usually means a couple of js files, a couple of css files and some assets.
Deploying means taking the output of a build and making it available to your users. Again this differs from project to project. In the vuejs world this usually means taking the artifacts from the build and uploading them to an http enabled web server.
I came to notice that there is one folder called assets in the root folder.To know more about it,I went through this link.Now I want to know adding some css in these files is good or shall I add css to to the main.css file inside css folder.
The asset folder is automatically generated by Yii based upon your environment so best avoid putting your CSS, images etc inside here. It also best to not commit these folders and files into SVN as they are automatically generated and folder names will differ from your qa/staging/live site to your local site.
There are some good reasons to use Yii's assets.
it prevents naming conflicts in css and js files
it allows you to keep CSS and JS files under your document-root but outside of your web-root (for easier version control)
it allows to easily switch between sets of CSS & JS files, rather than having to deal with each file individually (suppose the system admin needs to revert back to a previous version).
it allows you to publish assets (images, JS & CS) to several websites hosted on the same server.
Please check here or there for more details.
Well, when i started my first Yii project, i also put my CSS and JS files in assets. It works but then i found that its not just the right way. Its better to make a separate directory for your CSS file(s). Also there are some auto generated files in assets, so to avoid mix-up with those and your i prefer to make it separate. Hope you got the point.