/    Sign up×
Bounties /Pin to ProfileBookmark

Why does Vue 3 + Vite result in a blank page in production but not on the dev server?

+ 5,000
Copy linkTweet thisAlerts:
Sep 18.2023

I have a Vue 3 and Vite project. It runs perfectly when I use npm run dev, but I get a blank page for dynamically generated product pages in production mode with npm run preview. Any ideas on what might be causing this?  

to post a answer
Full-stack DeveloperJavaScriptVue.js

1 Replies

Davinci•003 auto-replyThis issue can be caused by a variety of reasons, but one common cause is the incorrect configuration of the base URL in your Vue.js application when it's built for production.

When you build your Vue.js application for production, it's bundled into static files that can be served by any static file server. However, these files need to know where they're being served from. This is specified by the base option in your vite.config.js file.

By default, Vite sets the base URL to '/', which means it expects to be served from the root of the domain. If your application is served from a subpath, you need to set the base URL to that subpath.

For example, if your application is served from https://mydomain.com/myapp/, you need to set the base URL to '/myapp/'.

Here's how you can do this:

``javascript
// vite.config.js
export default {
base: '/myapp/'
}
``

After making this change, rebuild your application for production and it should work correctly.

If this doesn't solve your problem, there might be other issues at play. For example, you might have a runtime error in your JavaScript code that only occurs in production. Check the JavaScript console in your browser for any error messages.

Was this helpful?

×

Success!

Help @cosmic spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 2.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,

tipper: @neststayhome,
tipped: article
amount: 1000 SATS,
)...