VueJS - after npm run build I got blank page

Assuming you're using the webpack template for vue cli, which is what it looks like, this should help. The reason this may be useful to know the difference on is if you were to use the webpack-simple template, it has a single webpack-config.js file, with the direct use of the publicPath property from webpack (as opposed to assetsPublicPath).

A little while back I ran into what seemed to be the same situation. This seemed to be due to my use of the local dev server npm run dev instantiating things at a root level to my local dev server, as opposed to my production path, which was a sub-directory on the server. I solved it by changing the assetsPublicPath property that you've mentioned working with, only for the build config in config/index.js.

The setting of assetsPublicPath to an empty string should make the build respect path relative network assets. It's similar to the difference of writing <script src="/path/to/my.js"></script> (absolute to the server) and <script src="relative/path/to/my.js"></script> (relative to the html file the script tag is defined in).

Here's what my config looks like as a snippet.

// config/index.js...module.exports = {  build: {    ...    assetsPublicPath: '',    ...  },  dev: {    ...    assetsPublicPath: '/',    ...  }}

I searched forever with this same issue (npm run dev worked but build had a blank page).

The assetsPublicPath can be updated in the /config/index.js file if your project will end up on a server in a subfolder. But, what finally worked for me was that I was using mode: 'history' in my router setup. This had no problems during dev but in build it would not work.

There are more details listed here about configuring your server to work with history mode here. But I didn't want to mess with server settings at the moment and if I didn't use history mode then it instantly worked for me.

I was having the same problem and did not get a black page when I removed mode: 'history' in vue-router (as Dean mentioned).

From VueJs documentation:

.... To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. (https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode)

So, all you need to do to enable history mode is add a catch-all route:

{   path: '*',   name: 'catchAll',   component: Home}

NOTE: this catch-all route should go at the bottom -- after all other routes (otherwise, all requests will go to it).