I am trying to use Vue and Vite for my blog. To generate static pages I use ViteSSG. I migrated from Vue 2 with CLI and faced many problems.
There is a broken html import. Rollup tries to import all
html and from /posts
too. And rollup uses my
loader. So it can't parse result as html. I don't know how
to exclude all from posts. I found that Vite uses all html
files as start points. And Vite does not have option to
exclude or use just index.html. I sacrificed HTML posts.
Now there are only markdown.
Routes broken. Because I use filenames with dot in url. See https://github.com/vitejs/vite/pull/2634. I renamed posts.
Rollout has limitations for imports and does not like
post.md?more=true
. See
https://github.com/rollup/rollup/issues/4275. So I wrote
new loader.
Problem with environments in template. For example I can't
write in my post process.
.
See https://github.com/vitejs/vite/issues/9829. To solve
that I do replacement in my loader before Vite does.
content = content
.replace(/\bimport\.meta/g, 'import.<wbr/>meta')
.replace(/\bprocess\.env/g, 'process.<wbr/>env');
Dynamic imports and Rollup are two big problems.
npm run serve
doesn't use Rollup and the
import work. But build
brings new errors.
Now I found good combination of Vite, Vue and ViteSSG versions and I can build my blog. See https://github.com/Qwertovsky/vuejs-blog-generator.
But I tried to update and got new error. My dynamic import does not work. The post is loaded by ESM loader. And it says:
Unknown file extension ".md"
Why does program not respect plugins and my loader? I don't know. I will look for workaround.