I'm not sure when to use what.
with nuxt build you get two directories(client & server) that means you are actually deploying node.js server(i.e. express, right?)
with nuxt generate you get .html
It seems both ways you can have good SEO which nuxt aims at. And to me, nuxt generate option seems more consize since it doesn't envolve server.
What am I missing here? Why should I use nuxt build and get server code mixed up?
This is shown in the docs here:
https://nuxtjs.org/docs/get-started/commands/
nuxt build: Build your application with webpack and minify the JS & CSS (for production).
nuxt generate: Build the application and generate every route as a HTML file (used for static hosting).
Josh
Related
In the Official Guide it says that If to generate a static site, there are two ways:
Prerendering (Which is to my understanding is SSG: By running nuxt generate.
Client-Only Rendering (SPA): By setting ssr: false and running nuxt generate.
So is nuxt generate a shortcut and it just sets target to static so that I don't have to do it manually in the nuxt.config? I tried using the command with and without setting target: static and it produced the same output but not sure if there are any caveats.
At the end, there is no specific reason of having an SPA with a Node.js server, so nuxt build is irrelevant in this case.
Having as SSG or SSR depending on the script that you use seems logical indeed.
Before, we need to have:
ssr: true and target: 'server' then run nuxt build
ssr: true and target: 'static' then run nuxt generate
It looks more logic to only have the launched script by nuxt deciding that and this is what the team apparently took as a final approach.
So no, I don't think that there are any kind of drawbacks to that. It's mainly a better/faster DX.
PS: if you put target: 'server' but use nuxt generate, you still have the whole thing generated for a static deploy.
I have a very particular question, cause I wish to create a webpage that works without a server, and I'm trying to do it using vite, my whole project is using vue + vite.
if I try to use "vite build" command, the page deploy as blank, and the only way I can see the page is if I use "vite preview".
would it be possible, somehow, to load the content of the html page using vite, without needing the "vite preview"? just double clicking on index.html
Using vue-cli, this is possible by setting the publicPath in the vue.config.js file to an empty string, see: https://cli.vuejs.org/config/#publicpath
I've personally only used it with Vue 2, but from what I read online it should also be possible with Vue 3, if you're okay with switching to vue-cli.
Using Vite, I found this question and answer which shows a way by bundling all the scripts, css and images into a single file:
How to open a static website in localhost but generated with Vite and without running a server?
I did try that and it mostly works, but not currently for svg files which I use a lot of in my application. It might work fine for your use-case.
I did also need to add "type": "module", in my package.json to get rid of an error saying
"Error [ERR_REQUIRE_ESM]: require() of ES Module
/path/to/dist/index.js from /path/to/vite.config.inlined.ts not
supported."
If you open your page simply as an index.html, you will be limited regarding some API calls and alike. Nowadays, you will need a light server to be hosting it via a simple vite preview as you saw. This is mainly because the files are being worked with bundlers like Webpack and Vite.
I'm not sure that there is a way of loading the whole thing with just an index.html because files like .vue are not natively supported, you need a specific loader.
One simple solution would be to use Vue as a CDN, but it will limit your DX experience regarding SFC files, but you will be able to use Vue into a regular index.html file.
PS: your performance will also be worse overall (because of the required network requests).
If you want something really lightweight, you could of course also use petite-vue, maybe more suited towards super simple projects with a tiny need of reactivity.
I still recommend using something like Netlify or Vercel, to host your static site for free + having the whole Vue experience thanks to a server running vite preview for you.
The Nuxt documentation (latest) states that for SPA you need to set ssr: false in nuxt.config.js. Also, every vue file in the pages folder is added to the router configuration, so you don't have to do this yourself. This is both correct and works perfectly, but there is something I really don't understand.
When I run npm run build (nuxt-ts build), it builds the production output of the project and puts in the dist folder (default). I was surprised to see that even though I configured it to be a SPA, it still generates HTML files for each vue file in the pages folder.
It happens with newly generated projects using npx nuxt-create-app as well.
What I'd expect is that it only generates one HTML file (which is index) when ssr is set to false and when I want a static app, I would use npm run generate or set target to 'static' to create HTML files per route.
Nuxt documentation also states this for the target property:
https://nuxtjs.org/docs/2.x/get-started/commands#target-server-default-value (builds output to dist)
https://nuxtjs.org/docs/2.x/get-started/commands#target-static (generates HTML per route)
All I have in my config is ssr set to false, so it should not generate static files (HTML) per page.
What am I missing here, or am I misunderstanding how this works?
Thanks in advance!
Remember that in a static setup, your visitors may arrive at your site via any of your page routes— not just index.html.
For example, they may access https://www.your-app.com/contact-us. If you do not have a contact-us.html file available, and you don’t have a server configured to handle this request (as is the case with universal mode), you’re gonna end up with a 404.
What happens in static mode is contact-us.html is served, which contains the minimum javascript necessary to hydrate your nuxt app, then SPA mode kicks in— giving you client-side navigation.
I have a Vue CLI application that I'm currently working on that uses code splitting for JS and CSS, and builds almost 1,000 JS/CSS files on running npm run build.
I am hosting this application on Google Cloud Run, where I pay per request. While the cost is still not that significant, I was still looking to try and prevent the need for 500 requests for every page view. I had a thought, but I'm not sure it's possible...
What I was wondering was if I could have my webpack build generate the JS and CSS files into the dist folder, but reference those files in the index.html file with an external host, instead of assuming a relative path. For instance, the file would exist at dist/css/chunk-abc123.js but in index.html, it would be something like https://storage.google.../css/chunk-abc123.js.
That way, in my CI pipeline, I can upload those files from the dist directory into Google Cloud Storage, and serve them up statically from there.
Does anyone know if this is possible? If so, can you guide me in the right direction?
publicPath comes in rescue.
The base URL your application bundle will be deployed at (known as
baseUrl before Vue CLI 3.3). This is the equivalent of webpack's
output.publicPath, but Vue CLI also needs this value for other
purposes, so you should always use publicPath instead of modifying
webpack output.publicPath.
// vue.config.js
module.exports = {
...
publicPath: 'https://storage.google...'
...
}
I´m starting with Vuepress (https://vuepress.vuejs.org), and i´d followed the docs to integrate it with an existing project (https://vuepress.vuejs.org/guide/getting-started.html#inside-an-existing-project). I used the sugested docs directory.
But now i need to "really" integrate with my project and i need to when my users access the my-project.com/docs, to reach the Vuepress docs
If i make (yarn docs:build), the /dist folder will be generated to be used anywhere as a statics HTML files. I tought in put the /dist/ content in the /static/ files of my project. But the vue-router response to /docs is a 404.
And i will still need to make 2 builds, my project and the docs.
The questions are:
How can i make the vue-router "see" the vuepress build files? Where to put them?
How can i integrate the run build of project to make them both?
I have 2 projects, one with quasar and the other i´m using vue-cli 3.
Thank you all.
How can i make the vue-router "see" the vuepress build files? Where to put them?
You don't, it's basically an external link. A simple <a href="/docs"> should be sufficient.
How can i integrate the run build of project to make them both?
You don't, you add a new task that does them both.
// package.json
{
"scripts": {
"build-project": "node build-project.js"
}
}
from a terminal
# yarn run build-project
I think maybe the point problem is to solve the Vue-Router to make the vue-router don't handle the link when we external link the /docs as like.