How to configure Vue to process files with other extensions like md(markdown) as static assets?

[CoderJo-Pro]

I'm seeking guidance on using the fetch method with an alias URL like "@/assets/example.md" to download markdown files and reference them. After researching online, it appears that editing the vue.config.js file is necessary. However, navigating the documentation was overwhelming, and I felt lost, therefore I've reached out for assistance.

The two problems I face are:

• How can I configure Vue to handle files with extensions other than the default ones as static assets, similar to how it deals with image files?
• How can URLs used in the fetch method be processed to the corresponding production URL in Vue?

[s3xysteak]

Check the document of vite, or ask for help in vite's discussion. https://vitejs.dev/guide/assets.html#importing-asset-as-string

The simplest explanation is:

import README from './readme.md?url' // README = '/xx/xx/readme.md'

import README from './readme.md?raw' // README = '# Hi \n\n ## It's me, the document content ....'

[CoderJo-Pro]

Does this solution work for projects generated by Vue CLI? I am currently working on this type of project, although I'm considering migrating it to a Vite-based project. However, that would involve a lot of work for now.

[s3xysteak]

If you are using Vue CLI, plz check the document of Vue CLI or Webpack, I only know a little bit about that. As I known, Vue do not handle anything about assets, which was usually handled by the build tool like Vite.

[CoderJo-Pro]

For Vue CLI, Webpack configuration is set in 'vue.config.js' using a "chain" syntax. I lacked experience with Webpack, so it was stressful for me. Thank you for the information about Vite; it's really useful.