Short answer: Because this is how TypeScript works. Vite config interface does not know anything about Vitest and TS does not allow excessive properties (properties not defined by the type/interface) Because Vite itself does not know anything about Vitest and it’s configuration. So Vitest must extend Vite config (defined as TS interface) In order to … Read more
Easiest way is to use the vite-plugin-mkcert package. npm i vite-plugin-mkcert -D vite.config.js import { defineConfig } from ‘vite’ import mkcert from ‘vite-plugin-mkcert’ export default defineConfig({ server: { https: true }, plugins: [ mkcert() ] }) When you run the local vite dev server you may be prompted for your password the first time. It … Read more
You can load the app level env variables and add them to the Node level env variables: import { defineConfig, loadEnv } from ‘vite’; import vue from ‘@vitejs/plugin-vue’; export default ({ mode }) => { process.env = {…process.env, …loadEnv(mode, process.cwd())}; // import.meta.env.VITE_NAME available here with: process.env.VITE_NAME // import.meta.env.VITE_PORT available here with: process.env.VITE_PORT return defineConfig({ plugins: … Read more
It’s because build.rollupOptions.external from vite:rollup setup looks for / before external files. So when you add css files to your html just add “https://stackoverflow.com/” (eg. /src/foo.css instead of src/foo.css)
Update 2022: Vite 3.0.9 + Vue 3.2.38 Solutions for dynamic src binding: 1. With static URL <script setup> import imageUrl from ‘@/assets/images/logo.svg’ // => or relative path </script> <template> <img :src=”imageUrl” alt=”img” /> </template> 2. With dynamic URL & relative path <script setup> const imageUrl = new URL(`./dir/${name}.png`, import.meta.url).href </script> <template> <img :src=”imageUrl” alt=”img” /> … Read more
I had similar problems and solved it by tsconfig.json { … “compilerOptions”: { … “target”: “ESNext”, “types”: [“vite/client”] } } Have vite installed as a dev dependency.
You need two different TS configs because the project is using two different environments in which the TypeScript code is executed: Your app (src folder) is targeting (will be running) inside the browser Vite itself including its config is running on your computer inside Node, which is totally different environment (compared with browser) with different … Read more
There are two problems here: Tell typescript how to resolve import path Tell vite how to build import path You only tell typescript how to resolve, but vite don’t konw how to build. So refer to the official document resolve.alias, maybe this is what you want: // vite.config.ts { resolve: { alias: [ { find: … Read more
When you dynamically import a route/component, during build it creates a separate chunk. By default, chunk filenames are hashed according to their content – Overview.abc123.js. If you don’t change the component code, the hash remains the same. If the component code changes, the hash changes too – Overview.32ab1c.js. This is great for caching. Now this … Read more
dev starts a local web server with HMR for development build builds the project, and outputs to the folder ./dist preview start a local web server that serves the built solution from ./dist for previewing