Namaste to everybody!;)
I would like to share with you one issue that i had today with my set-up of Vue, Vite and Quasar. The issue is small and it won't get much of your time and I hope this article would be useful for somebody.
I had troubles with default Quasar prebuild icons. Built a dev server I received an error:
The request url "../vite-vue-quasar/node_modules/@quasar/extras/roboto-font/web-font/KFOmCnqEu92Fr1Mu4mxM.woff" is outside of Vite serving allow list.
The same error I had for icons and all Quasar extras.
I had the following vite.config.js structure:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue({
template: { transformAssetUrls }
}),
quasar({
sassVariables: '@/assets/styles/quasar-variables.sass'
})
],
resolve: {
alias: {
'@/': `${path.resolve(__dirname, 'src')}/`
}
}
})
The tip here is that from Vite v2.7 server strict mode is set to true by default and it restricts serving files outside of workspace root.
Link to official docs: https://vitejs.dev/config/#server-fs-strict
Below you can find an option to solve this problem with enabled strict mode, but I just turn the strict mode off.
export default defineConfig({
server: {
fs: {
// Allow serving files from one level up to the project root
strict: false,
}
},
Thank you for reading and I'm eager to hear if my decision is not right enough;)
Top comments (0)