I have laravel 10 and I'm trying to use vite to bundle my assets.
On my local machine running npm run dev
works fine. But in production using npm run build
doesn't use https in my blade file, so that I have mixed resources and the browser doesn't load the assets, because the rest of the page is https.
So my question is, what requirements must be set so that vite uses https and not http? Is there some ENV variables that must be set? What else could be the problem?
My vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
server: {
host: true,
hmr: {
host: 'localhost'
}
},
});
package.json:
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"autoprefixer": "^10.4.14",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.2",
"postcss": "^8.4.23",
"tailwindcss": "^3.3.2",
"vite": "^4.0.0"
}
}
And my layout.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="antialiased bg-gray-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{$title ?? __('TEST')}}</title>
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<main>
{{$slot}}
</main>
</body>
</html>
You might need to set a custom ASSET_URL and set it to the https version of your URL. This worked for me in Vercel when the html was loading from https but Vite wanted to use http.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With