Migrate from vue-cli to vite

[csc-felipe]

Description

vue-cli is not the recommended tool for vue projects any more, and migrating to vite is a step towards migrating to vue3.

Quite many changes were needed, but it looks like it works as before. Development workflows shouldn't be affected, as the pnpm commands are the same.

The most significant change for the project structure is that for a multipage app (with multiple HTML entries), the HTML files need to be declared specifically for each entry.

The biggest difference, as I understood, between both tools is the underlying bundler, and the dev server.

The bundler in vue-cli is webpack, while for vite it's rollup.

They claim that vite's dev server is superfast, but what it actually does is build dependencies on demand, so it looks faster to start, but while browsing some waiting usually follows. It might anyway be an improvement over vue-cli.

The browser compatibility is also supposed to be good enough, even without babel or autoprefixer:

• Chrome >=87
• Firefox >=78
• Safari >=14
• Edge >=88

Related issues

Type of change

• New feature (non-breaking change which adds functionality)

Changes Made

• Remove vue-cli and dependencies
• Add vite and its dependencies
• Migrate vue-cli config to vite config
• Fix component imports, mostly adding .vue to the imports, which also makes type hinting work
• Fix css import statements
• Importing css styles in style blocks was changed to global "import" configured in vite.config.js
• Created a middleware plugin for vite to serve the /browse page as an SPA, and the other html files as well
• Add https configuration for the dev server

Testing

• Tests do not apply

Please, check that the setup works as expected!

Mentions

[blankdots]

should we wait for #929 before, or when we have all the features before the release, before we proceed with this ?

[csc-felipe]

should we wait for #929 before or when we have all the features before the release before we proceed with this ?

I think so

[hannyle]

Looks good and it works as expected for me 👍

[csc-felipe]

Rebased, and added github PR number to the changelog.

[csc-felipe]

I'll mark it as WIP while we wait for other PR to be merged

[csc-felipe]

I've been developing off this branch, and the dev server doesn't work well with the current configuration.

[csc-felipe]

rebased

[csc-felipe]

rebased and added https mode for dev server

[csc-felipe]

The devserver seems to behave well now.
The fix was to set the path to javascript file in the html files without a leading ..
Together with the middleware that serves the correct files.

I still need to test that websockets work, though.

[csc-felipe]

websockets work

[blankdots]

i personally do not spot anything at this time, was able to build and run it, however best to wait for other reviewers before merging

[hannyle]

Worked well for me in most of the pages, some exceptions are for pages such as /unauth/, /forbid, /uidown which redirected me to index.html, I think.

[csc-felipe]

@hannyle, it should be fixed now

[sampsapenna]

Works nicely, Vite seems considerably quicker in the hot-reloads of files. Took a bit of getting used to the files not getting built initially, though.

Approved, everything seems to work 👌🏼