VueJS: Using static HTML files

Question

I'm quite new to Vue and I'm building a web panel for which I need a login page. However, since that login has nothing to do with the single page web panel that I am building (in terms of look, navigation, etc), and it uses a completely different template, I want to encapsulate it in a completely distinct static HTML file.

How can I serve a static HTML file next to the default Index.Html in Vue? Is that even possible?

Answer 1

You can use static assets folder for that task.

vue cli 2.x

There are two assets folders by default: static ("Real" Static Assets) in app root and src/assets (Webpacked Assets)

The first one is what you can use, i think. Quote from https://vuejs-templates.github.io/webpack/static.html

In comparison, files in static/ are not processed by Webpack at all: they are directly copied to their final destination as-is, with the same filename. You must reference these files using absolute paths, which is determined by joining build.assetsPublicPath and build.assetsSubDirectory in config.js.

Any static assets and html too can be placed here, why not. They can be accessed using absolute paths, for example in dev environment and default config:

http://localhost:8080/static/login.html

vue cli 3

There is some changes in new vue cli version. "Real" static assets directory (not processed by Webpack) now is public. Quotes from: https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

Static Assets Handling Static assets can be handled in two different ways:

• Imported in JavaScript or referenced in templates/CSS via relative paths. Such references will be handled by webpack.

• Placed in the public directory and referenced via absolute paths. These assets will simply be copied and not go through webpack.

Also check this recommendation!:

Note we recommend importing assets as part of your module dependency graph so that they will go through webpack with the following benefits:

• Scripts and stylesheets get minified and bundled together to avoid extra network requests.
• Missing files cause compilation errors instead of 404 errors for your users.
• Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.

When to use the public folder

• You need a file with a specific name in the build output.
• You have thousands of images and need to dynamically reference their paths.
• Some library may be incompatible with Webpack and you have no other option but to include it as a <script> tag.